new ui for calendar

[ijavad805]

1. new ui for persian calendar
2. we should have two type of event (range event and normal event)
3. events can get custom component

[ijavad805]

resualt

example usage code:

                <Calendar
                    events={
                        ctl?.data
                            ? ctl?.data?.map(i => {
                                  return {
                                      date: i.date,
                                      id: i.id,
                                      className: `${classes.event} ${eventStatusClasses[i.status]}`,
                                      title: (() => {
                                          return (
                                              <>
                                                  <div className={classes.title}>{i.title}</div>

                                                  <EventTechs techs={i.techs} />
                                              </>
                                          );
                                      })(),
                                      icon: <></>,
                                  };
                              })
                            : []
                    }
                    onDropEvent={() => {}}
                    onDay={date => {
                        const findThisDayIsHoliday = holidayCtl.dataCalendar.find(
                            (i: any) => moment(i.date, "YYYY-MM-DD").format("YYYY-MM-DD") === date
                        );

                        if (findThisDayIsHoliday || moment(date).day() === 5) {
                            return {
                                className: classes.holiday,
                            };
                        } else {
                            return {};
                        }
                    }}
                    lang="fa"
                />