Creating a calendar component in react native

Question

Hi I was trying to implement a calendar component in react native and here's the code below.

function generateCalendar(type = 'en') {
    var [etYear, etMonth, etDate] = Ethiopic.toEthiopian(
      state.activeDate.getFullYear(),
      state.activeDate.getMonth() + 1,
      state.activeDate.getDate(),
    );
    console.log('Month: ', etMonth);

    var enYear = state.activeDate.getFullYear();
    var enMonth = state.activeDate.getMonth();

    var matrix = [];

    if (type == 'en') {
      matrix = [];
      var firstDay = new Date(enYear, enMonth, 1).getDay();
      var maxDays = enCalendar.en_days[enMonth];
      if (enMonth == 1) {
        if ((enYear % 4 == 0 && enYear % 100 != 0) || enYear % 400 == 0) {
          maxDays += 1;
        }
      }

      matrix[0] = enCalendar.en_weekDays;

      var counter = 1;
      for (var row = 1; row < 7; row++) {
        matrix[row] = [];
        for (var col = 0; col < 7; col++) {
          matrix[row][col] = -1;
          if (row == 1 && col >= firstDay) {
            matrix[row][col] = counter++;
          } else if (row > 1 && counter <= maxDays) {
            matrix[row][col] = counter++;
          }
        }
      }
    } else if (type == 'et') {
      matrix = [];
      var startDayOfYear = Ethiopic.startDayOfEthiopian(etYear);

      // var firstDay = startOfYear + (30 % startDayOfYear);
      var firstDayOfYear = new Date(enYear, 8, startDayOfYear).getDay();
      var firstDay =
        (etMonth - 1) * 2 + firstDayOfYear > 7
          ? ((etMonth - 1) * 2 + firstDayOfYear) % 7
          : (etMonth - 1) * 2 + firstDayOfYear;
      var maxDays = etCalendar.et_days[etMonth - 1];
      console.log(maxDays);
      if (etMonth == 13) {
        if (etYear % 4 == 3) {
          maxDays += 1;
        }
      }

      matrix[0] = etCalendar.et_weekDays;

      var counter = 1;
      for (var row = 1; row < 7; row++) {
        matrix[row] = [];
        for (var col = 0; col < 7; col++) {
          matrix[row][col] = -1;
          if (row == 1 && col >= firstDay) {
            matrix[row][col] = counter++;
          } else if (row > 1 && counter <= maxDays) {
            matrix[row][col] = counter++;
          }
        }
      }
    }
    return matrix;
  }

And my plan was to use the generated matrix to create the react component, and use the onPress field for button then change the month so that the hook could be used to generate a new matrix based on that month.

But when running the app it only runs for the first time and after using the changeMonth method it seems to produce an error saying state.activeDate.getFullYear is undefined.

Guruparan Giritharan · Accepted Answer · 2020-10-19T06:04:31.183

1

You should set the state like below

function changeMonth(n) {
    setState({
       activeDate: new Date(state.activeDate.setMonth(state.activeDate.getMonth() + n))
      });
  }

When you do it using the current way you are setting a callback function which does not have a getFullYear function.

edited Oct 19 '20 at 06:04

answered Oct 19 '20 at 05:20

Guruparan Giritharan

15,660
4
27
50

The same error is happening because when I console log the type of the active date its changed to number instead of being an object. – Aethiop Oct 19 '20 at 05:57
One more thing I wanted to generate different matrix for different calendar types and one of them has 13 months, is there a way to refactor the changeMonth function for 13 month calendar – Aethiop Oct 19 '20 at 14:00
ok code is bit complex but you can add 13 months, do something like below https://stackoverflow.com/a/5645110/1435722 – Guruparan Giritharan Oct 20 '20 at 03:41
I'm sorry but I still don't get how I can add 13th month because set month automatically makes 12 to 0 and starts a new year. I wanted to override this. – Aethiop Oct 20 '20 at 16:16
something like this var date=new Date(); var newDate = new Date(date.setMonth(date.getMonth()+13)); console.log(newDate); – Guruparan Giritharan Oct 20 '20 at 16:20
But this only gets the month which is 13 months from now and returns a number 0 to 11 only. Right?? – Aethiop Oct 20 '20 at 17:27
yes , maybe if you can come up with a workable example and put it as a separate question someone would be able to help, bcos the code you have provided is a bit complex, if you can point out the issue its easy – Guruparan Giritharan Oct 20 '20 at 17:33
Okay I'll do that – Aethiop Oct 20 '20 at 17:35
Here I posted a new question with better description https://stackoverflow.com/questions/64451145/coptic-type-calendar-component-react-native – Aethiop Oct 20 '20 at 18:20

Creating a calendar component in react native

1 Answers1