如何根据日历模式创建活动? [英] How can I create an event based on pattern for calendar?

查看:131
本文介绍了如何根据日历模式创建活动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试为某人创建一个转移日历,我知道模式开始的那一天,我知道开启和关闭日期的模式。但我遇到麻烦将其转化为代码。

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.

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

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.

这就是我所拥有的:

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

  });
});


推荐答案

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
  });

});

这篇关于如何根据日历模式创建活动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆