Calendar code

package-lock.json

@@ -13366,6 +13366,14 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-native-multiple-select": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/react-native-multiple-select/-/react-native-multiple-select-0.5.7.tgz",
+      "integrity": "sha512-scVCrOKwGacOYspWa8aINoe+cmMHc5yEMERThUXa04P9VNFWsq9NoQEwLKI+cCXPhe+VMg0+NsoLIhUGTn69fg==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-native-onesignal": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/react-native-onesignal/-/react-native-onesignal-4.3.0.tgz",

package.json

@@ -38,6 +38,7 @@
     "react-native-material-textfield": "git+https://github.com/javarahulsharma/react-native-material-textfield.git",
     "react-native-modal": "^13.0.0",
     "react-native-modal-selector": "^2.0.3",
+    "react-native-multiple-select": "^0.5.7",
     "react-native-onesignal": "^4.1.1",
     "react-native-paper": "^4.7.1",
     "react-native-picker-select": "^8.0.4",

src/UserComponents/Calendar/Calendar.js

@@ -15,6 +15,8 @@ import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-nat
 import DatePicker from 'react-native-datepicker';
 import SearchableDropdown from 'react-native-searchable-dropdown';
 import Snackbar from 'react-native-snackbar';
+import MultiSelect from 'react-native-multiple-select';
+
 export default class Calendar extends Component {
   constructor(props) {
     super(props);
@@ -51,12 +53,15 @@ export default class Calendar extends Component {
       location: '',
       assignedName: 'Select Squad Name',
       resource1: [],
-      Members:[],
-      addEventData:[],
+      Members: [],
+      addEventData: [],
+      selectedItems: [],
     };
     this.eventsData();
   }
-
+  onSelectedItemsChange = selectedItems => {
+    this.setState({ selectedItems });
+  };
   setModalVisible = (visible) => {
     this.setState({ modalVisible: visible });
   }
@@ -336,7 +341,9 @@ export default class Calendar extends Component {
       Subject: this.state.title,
       StartTime: this.state.startDate,
       EndTime: this.state.targetDate,
-      Members: [this.state.assignedto],
+      // Members: [this.state.assignedto],
+      // Members:[this.state.selectedItems],
+      Members:this.state.selectedItems,
       Description: this.state.eventdescription,
       IsAllDay: "1",
       Location: this.state.location,
@@ -383,7 +390,7 @@ export default class Calendar extends Component {
                     'Content-Type': 'application/json',
                   },
                   body: JSON.stringify({
-                    addEvent:addEventData,
+                    addEvent: addEventData,
                     action: "Add",
                     // idea_id: idea_id,
                     corp_code: cropcode,
@@ -401,13 +408,14 @@ export default class Calendar extends Component {
                   // alert(JSON.stringify(responseJson))
                   if (responseJson.status == 'True') {
                     this.setState({ open: false });
-                    this.setState({ itemPressedDisabled: false,
+                    this.setState({
+                      itemPressedDisabled: false,
                       isVisible: !this.state.isVisible,
-                      title:'',
-                      location:'',
-                      startDate:'',
-                      targetDate:'',
-                      eventdescription:'',
+                      title: '',
+                      location: '',
+                      startDate: '',
+                      targetDate: '',
+                      eventdescription: '',
                     })
 
                     //Navigate to AddModule screen
@@ -547,7 +555,11 @@ export default class Calendar extends Component {
       );
     })
 
-    const { modalVisible } = this.state;
+  
+
+    const { modalVisible,selectedItems } = this.state;
+    
+   
     return (
 
       <Container>
@@ -678,7 +690,7 @@ export default class Calendar extends Component {
                 }}
                 onDateChange={(text) => this.setState({ targetDate: text })} />
             </View>
-            <View style={{ paddingTop: 10, width: '100%', marginLeft: '4%' }}>
+            {/* <View style={{ paddingTop: 10, width: '100%', marginLeft: '4%' }}>
 
               <SearchableDropdown
                 placeholder={this.state.assignedName}
@@ -722,8 +734,33 @@ export default class Calendar extends Component {
 
               />
               <Text style={{ color: 'red' }}>{this.state.error3}</Text>
-            </View>
+            </View> */}
+            <View style={{ marginLeft: 10, width: '100%', }}>
+
 
+              <MultiSelect
+                hideTags
+                items={this.state.resource1}
+                uniqueKey="id"
+                ref={(component) => { this.multiSelect = component }}
+                onSelectedItemsChange={this.onSelectedItemsChange}
+                selectedItems={selectedItems}
+                selectText="Select Users"
+                searchInputPlaceholderText="Search Items..."
+                onChangeInput={(text) => console.log(text)}
+                altFontFamily="ProximaNova-Light"
+                tagRemoveIconColor="#CCC"
+                tagBorderColor="#CCC"
+                tagTextColor="#CCC"
+                selectedItemTextColor="#CCC"
+                selectedItemIconColor="#CCC"
+                itemTextColor="#000"
+                displayKey="name"
+                searchInputStyle={{ color: '#CCC' }}
+                submitButtonColor="#CCC"
+                submitButtonText="Submit"
+              />
+            </View>
 
             <View style={{ marginLeft: 10, width: '100%', }}>