Search code examples
jqueryfullcalendarfullcalendar-scheduler

How to display events in Calendar (https://fullcalendar.io/) base on monthly, weekly and daily same time

I have an issue with display the calendar event in daily, weekly and monthly according to user requirement.

I used the: https://fullcalendar.io/

This is our database structure: http://prntscr.com/i4rtwi

In Database "repeating_options" fields are there it means : 0: Daily event 1: Weekly event 2: Monthly event

We have only date field it means to start the event from this particular date and display the event the infinite year or you can consider the end date like (31-12-2050).

When we implement using this code :

$('#calendar').fullCalendar({
    header: {
        left: 'agendaDay,agendaWeek,month',
        center: '',
        right: 'prev,title,next'
    },
    locale : lang_value,
    eventClick: function (event, jsEvent, view) {
       view_appointment_info(event.id);
    },
    eventRender: function(event, element, view){
        return (event.ranges.filter(function(range){
            return (event.start.isBefore(range.end) &&
                    event.end.isAfter(range.start));
        }).length)>0;
    },
});

When I use the "eventRender" than daily and weekly event working fine but not working monthly. Monthly event displays daily bases instead of display once in the month.

Sample JSON event data:

[
  {
    "dow":[0,1,2,3,4,5,6],
    "ranges":[{"start":"2018-01-20","end‌​":"2050-12-31"}],
    "id‌​":"1",
    "title":"Repea‌​t Daily",
    "start":"15:54:00",
    "end":"16:24:00",
    "type":"",
    "color"‌​:"#f6cacb"
  },
  {
    "dow":[‌​"3"],
    "ranges":[{"sta‌​rt":"2017-12-20","en‌​d":"2050-12-31"}],
    "i‌​d":"2",
    "title":"Repe‌​at Weekly",
    "start":"17:05:00",
    "end":"17:35:00",
    "type":"","color‌​":"#e73e97"
  },
  {
    "repea‌​t":1,
    "ranges":[{"sta‌​rt":"2018-01-01","en‌​d":"2050-12-31"}],
    "i‌​d":"3",
    "title":"Repe‌​at Monthly",
    "start":"21:16:00",
    "end":"21:46:00",
    "type":"",
    "colo‌​r":""
  }
]

So would you please suggest me how we can solve this issue?

Solution

  • Now we have an agreed format (as per the comments) for providing sufficient information for monthly repeating events, we can write some code to make the calendar display monthly events.

    For the benefit of future readers I'll explain the agreed format here. For a monthly event, we will add two extra custom properties, in addition to the already custom ranges property (which is already used to determine the start and end of the period(s) of repetition):

    1) "frequency": "m" - this signifies that the event should repeat monthly.

    2) "dom": [1, 3, 5] - this array will contain the day(s) of the month on which to repeat the event. In this example, the event will repeat on the 1st, 3rd and 5th day of the month, providing those days fall within the dates defined in ranges

    So an event which repeats monthly will look like this:

    {
  "dom": [5], //new property
  "frequency": "m", //new property
  "ranges": [{
    "start": "2018-01-05",
    "end": "2050-12-31"
  }],
  "id": "3",
  "title": "Repeat Monthly",
  "start": "21:16:00",
  "end": "21:46:00",
  "type": "",
  "color": ""
}

    This event is designed to repeat monthly on the 5th of each month between 21:16 and 21:46. This pattern will start on 5th Jan 2018 and end on 31st December 2050.

    We then need to amend the code in the existing "eventRender" callback to take account of this extra information and use it to decide whether to place the event onto the calendar on any given day:

    eventRender: function(event, element, view) {
  //check if this instance of the event (one per day is generated for events with only time in their start/end properties) is within any of the ranges defined for it:
  if ((event.ranges.filter(function(range) {
      return (event.start.isBefore(range.end) &&
        event.end.isAfter(range.start));
    }).length) > 0) {
    if (event.frequency == "m") { //check whether repetition is monthly
      return ($.inArray(event.start.date(), event.dom) > -1); //show the event if the date of the month is in the defined days of the month for this event
    } else {

      return true;
    }
  } else {
    return false;
  };
},

    N.B. The original code dealt with daily and weekly repetition already via the ranges and the dow properties, it was only data and functionality for monthly repetition which was missing.

    See http://jsfiddle.net/sbxpv25p/173/ for a working demonstration.