hadimostafapour / react-native-calendars-persian

React Native Calendar Components 📆+ Jalali Calendar Support
MIT License
21 stars 11 forks source link

Current week is not selected on load somestimes #3

Closed iamhaaamed closed 5 years ago

iamhaaamed commented 6 years ago

Hi, Current week is not selected on load somestimes and it's showing one week ago, so current day is not showig on load: bug this is my code:

        <Agenda
          jalali
          firstDay={6}
          // the list of items that have to be displayed in agenda. If you want to render item as empty date
          // the value of date key kas to be an empty array []. If there exists no value for date key it is
          // considered that the date in question is not yet loaded
          items={this.props.userPrograms}
          //   // callback that gets called when items for a certain month should be loaded (month became visible)
          //   loadItemsForMonth={month => {
          //     console.log("trigger items loading");
          //   }}
          // callback that fires when the calendar is opened or closed
          onCalendarToggled={calendarOpened => {
            console.log(calendarOpened);
          }}
          // callback that gets called on day press
          onDayPress={day => {
            const selectedDate = moment(day.dateString).format("YYYY-MM-DD");
            this.setState({
              selectedDate,
              selectedMonth: moment(selectedDate).format("jMMMM"),
              selectedWeek: Math.ceil(moment(selectedDate).format("jDD") / 7)
            });
          }}
          // callback that gets called when day changes while scrolling agenda list
          onDayChange={day => {
            console.log("day changed");
          }}
          //   // initially selected day
          //   selected={"2018-05-16"}
          //   // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
          //   minDate={"2018-05-10"}
          //   // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
          //   maxDate={"2018-05-30"}
          // Max amount of months allowed to scroll to the past. Default = 50
          pastScrollRange={50}
          // Max amount of months allowed to scroll to the future. Default = 50
          futureScrollRange={50}
          // specify how each item should be rendered in agenda
          renderItem={(item, firstItemInDay) => {
            return (
              <Swipeout
                autoClose
                right={[
                  {
                    backgroundColor: "orange",
                    text: "ویرایش",
                    onPress: () => {
                      this.props.navigation.navigate("ProgramEdit", {
                        id: item.id,
                        selectedDate: this.state.selectedDate
                      });
                    }
                  }
                ]}
                left={[
                  {
                    backgroundColor: "red",
                    text: "حذف",
                    onPress: () => {
                      Alert.alert(
                        "تایید حذف",
                        "آیا شما اطمینان دارید؟",
                        [
                          {
                            text: "تایید",
                            onPress: async () => {
                              console.log(this.props.userPrograms);
                              await this.props.dispatch(
                                deleteUserWeeklyProgram(item.id)
                              );
                              await this.props.dispatch(getUserPrograms());
                            }
                          },
                          {
                            text: "انصراف",
                            onPress: () => console.log("Cancel Pressed"),
                            style: "cancel"
                          }
                        ],
                        { cancelable: false }
                      );
                    }
                  }
                ]}
              >
                <View style={[styles.item, { height: 120 }]}>
                  <View
                    style={{
                      flexDirection: "row",
                      justifyContent: "space-between"
                    }}
                  >
                    <View>
                      <Text style={{ color: "gray", fontSize: 10 }}>
                        از
                        {item.startTime &&
                          moment(item.startTime).format(" HH:mm A")}
                      </Text>
                      <Text style={{ color: "gray", fontSize: 10 }}>
                        تا
                        {item.endTime &&
                          moment(item.endTime).format(" HH:mm A")}
                      </Text>
                    </View>
                    <Text style={{ flex: 1, textAlign: "right" }}>
                      {item.description && item.description.length > 30
                        ? item.description.substr(0, 30) + "..."
                        : item.description}
                    </Text>

                    <View
                      style={{
                        width: 30,
                        height: 30,
                        borderRadius: 15,
                        marginLeft: 5,
                        backgroundColor: "#" + item.colorCode,
                        alignItems: "center",
                        justifyContent: "center"
                      }}
                    >
                      <Image
                        style={{
                          width: 20,
                          height: 20
                        }}
                        source={{
                          uri: "http://www.parsehadmin.ir" + item.icon
                        }}
                      />
                    </View>
                  </View>
                  <Text style={{ color: "gray", fontSize: 12 }}>
                    {item.address}
                  </Text>
                  <View
                    style={{
                      flexDirection: "row",
                      marginHorizontal: 10,
                      marginTop: 10
                    }}
                  >
                    <TouchableOpacity
                      style={{ flex: 1, alignItems: "center" }}
                      onPress={() => {
                        //this.setState({ alarmEnabled: !alarmEnabled });

                        this.props.navigation.navigate(
                          "SelectContactsNotRealTimeInvite",
                          { userWeeklyProgramID: item.id }
                        );
                      }}
                    >
                      <Image
                        resizeMode="contain"
                        style={styles.programIcon}
                        source={
                          alarmEnabled
                            ? require("../assets/images/icons/logo-blue-forward.png")
                            : require("../assets/images/icons/logo-gray-forward.png")
                        }
                      />
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={{ flex: 1, alignItems: "center" }}
                      onPress={() => {
                        //this.setState({ alarmEnabled: !alarmEnabled });
                        // await this.props.dispatch(toggleAlarm(item.id));
                        // await this.props.dispatch(getUserPrograms());
                        //this.setState({selected})
                        this._showAlarmPicker(item);
                      }}
                    >
                      <Image
                        resizeMode="contain"
                        style={styles.programIcon}
                        source={
                          item.remainingTime
                            ? require("../assets/images/icons/bell-yellow.png")
                            : require("../assets/images/icons/bell-gray.png")
                        }
                      />
                      {/* <Text>{JSON.stringify( item)}</Text> */}
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={{ flex: 1, alignItems: "center" }}
                      onPress={async () => {
                        this.props.navigation.navigate(
                          "SelectLocationProgramEdit",
                          { userWeeklyProgram: item }
                        );
                      }}
                    >
                      <Image
                        resizeMode="contain"
                        style={styles.programIcon}
                        source={
                          alarmEnabled
                            ? require("../assets/images/icons/pin-red.png")
                            : require("../assets/images/icons/pin-red.png")
                        }
                      />
                    </TouchableOpacity>
                    <TouchableOpacity style={{ flex: 1, alignItems: "center" }}>
                      <Image
                        resizeMode="contain"
                        style={styles.programIcon}
                        source={
                          alarmEnabled
                            ? require("../assets/images/icons/alarm-clock.png")
                            : require("../assets/images/icons/alarm-clock.png")
                        }
                      />
                    </TouchableOpacity>
                  </View>
                </View>
              </Swipeout>
            );
          }}
          //   // specify how each date should be rendered. day can be undefined if the item is not first in that day.
          //   renderDay={(day, item) => {
          //     return <Text>{JSON.stringify(item)}</Text>;
          //   }}
          // specify how empty date content with no items should be rendered
          renderEmptyDate={() => {
            return <View />;
          }}
          // specify how agenda knob should look like
          renderKnob={() => {
            return <Text>...</Text>;
          }}
          // specify what should be rendered instead of ActivityIndicator
          renderEmptyData={() => {
            return <View />;
          }}
          // specify your item comparison function for increased performance
          rowHasChanged={(r1, r2) => {
            return r1 !== r2;
          }}
          // Hide knob button. Default = false
          hideKnob={false}
          //   // By default, agenda dates are marked if they have at least one item, but you can override this if needed
          //   markedDates={{
          //     "2018-05-23": { selected: true, marked: true },
          //     "2018-05-24": { marked: true },
          //     "2018-05-25": { disabled: true }
          //   }}
          // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
          onRefresh={() => console.log("refreshing...")}
          // Set this true while waiting for new data from a refresh
          refreshing={false}
          // Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView.
          refreshControl={null}
          // agenda theme
          theme={{
            agendaDayTextColor: "yellow",
            agendaDayNumColor: "green",
            agendaTodayColor: "red",
            agendaKnobColor: "blue",
            selectedDayBackgroundColor: "#940347"
          }}
          // agenda container style
          style={{}}
        />

I'm using android emulator with api 28 and my react-native version is 0.55.4 with react 16.4.2.

hadimostafapour commented 5 years ago

Please provide code snippets/Reproduce Steps

iamhaaamed commented 5 years ago

sorry about that, I added the info