How can I create an event based on pattern for cal

问题:

I am trying to create a "shift" calendar for someone and I know what day the pattern starts on and I know the pattern for days on and off. But am having troubles translating it into code.

They work 4 days, off of work 3 days, work 4, off of work 3 days, work for 4, off 2 days, repeat. I need to create some logic to create an event for a calendar based on this.

This is what I have:

$(document).ready(function() {

  var on = [4, 4, 4];
  var off = [3, 3, 2];
  var startPattern = "2017-03-04";

  var days = $('#calendar').fullCalendar('getDate').daysInMonth();
  var events = [];

  for (var i = $('#calendar').fullCalendar('getDate').day(); i < days; i++) {
    var event = {
      title: "work",
      start: ''
    }
    events.push(event);
  }


  $('#calendar').fullCalendar({
    // put your options and callbacks here
    events: events

  });
});

回答1:

Plunker: https://plnkr.co/edit/xIfaWB?p=preview

$(document).ready(function() {

  // define the schedule; 
  // duration is days; 
  // title is what is shown on the calendar
  // color is how to color event
  var schedule = [{
    duration: 4,
    title: 'work',
    color: 'red'
  }, {
    duration: 3,
    title: 'off',
    color: 'blue'
  }, {
    duration: 4,
    title: 'work',
    color: 'red'
  }, {
    duration: 3,
    title: 'off',
    color: 'blue'
  }, {
    duration: 4,
    title: 'work',
    color: 'red'
  }, {
    duration: 2,
    title: 'off',
    color: 'blue'
  }, ];

  // define the range of events to generate
  var startDay = moment("2017-03-04");
  var endDay = moment("2017-05-04");


// generate the events
  var events = [];
  // we loop from the start until we have passed the end day
  // the way the code is defined, it will always complete a schedule segment
  for (var s = 0, day = startDay; day.isBefore(endDay);) {
    // loop for each day of a schedule segment
    for (var i = 0; i < schedule[s].duration; i++) {
      // add the event with the current properties
      events.push({
        title: schedule[s].title,
        color: schedule[s].color,
        // we have to clone because the add() call below mutates the date
        start: day.clone(),
        allday: true
      });
      // go to the next day
      day = day.add(1, 'day');
    }

    // go to the next schedule segment
    s = (s + 1) % schedule.length;
  }



  // render the calendar
  $('#calendar').fullCalendar({
    events: events
  });

});