【问题标题】:How can I create an event based on pattern for calendar?如何根据日历模式创建事件?
【发布时间】:2017-03-13 21:00:08
【问题描述】:

我正在尝试为某人创建一个“轮班”日历,并且我知道该模式从哪一天开始,并且我知道这一天的模式。但是在将其转换为代码时遇到了麻烦。

他们工作 4 天,下班 3 天,工作 4 天,下班 3 天,工作 4 天,下班 2 天,如此重复。我需要创建一些逻辑来为基于此的日历创建事件。

这就是我所拥有的:

$(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

  });
});

【问题讨论】:

  • 你能举例说明一下,你所说的工作4,下3,工作4下3,工作4下2是什么意思。不清楚它是什么类型的轮班模式
  • 我的意思是,假设你从 3 月 4 日开始,工作 4 天,然后休息 3 天,然后工作 4 天,然后休息 3 天,然后工作 4 天,然后休息 2 天。然后从头开始重新启动,例如:4-3-4-3-4-2

标签: javascript logic fullcalendar momentjs


【解决方案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
  });

});

【讨论】:

  • 嗯,这似乎可行。感谢您的详细解决方案!我正努力把头绕过去。
猜你喜欢
  • 2022-10-06
  • 1970-01-01
  • 1970-01-01
  • 2021-09-06
  • 2017-10-06
  • 2012-01-15
  • 1970-01-01
  • 2018-04-30
  • 1970-01-01
相关资源
最近更新 更多