单击日期名称,然后在Fullcalendar中选择一周中同一天的所有日期

时间:2018-05-06 22:05:11

标签: jquery fullcalendar

my current calendar

我在图像中显示了这个日历,我想通过点击星期几来处理选择。我的想法是点击,比方说,星期一,日历选择当前视图中的所有星期一。我在他们的文档中到处查找,找不到任何相关内容。

有可能做到吗?

编辑:

function enumerateDaysBetweenDates(startDate, endDate) {
    var now = startDate.clone(), dates = [];

    while (now.isSameOrBefore(endDate)) {
      dates.push(now.format('M/D/YYYY'));
      now.add(1, 'days');
    }
    return dates;
  };

  var $calendar = $('#calendar').fullCalendar({
    header: {
      left: 'prev,next',
      center: 'title',
      right: ''
    },
    selectable: true,
    select: function (startDate, endDate) {
      var html = '<input class="form-control" type="text" disabled="disabled" value="' + startDate.format('DD/MM/YYYY') + ' até ' + endDate.format('DD/MM/YYYY') +'" />';
      console.log(enumerateDaysBetweenDates(startDate, endDate.add(-1, 'days')));
      $('#selected-dateranges').append(html);
    } 
  });

我创建了一支笔,使编辑变得简单。 link

1 个答案:

答案 0 :(得分:0)

基本代码相当简单。

日历日元素包含基于日期名称的类fc-monfc-tue等。它们的基类为fc-day。因此,在标题中点击日期文本并转换为日期名称类并在适当的日期切换选定的课程相当容易

试试这个

 $('#calendar').on('click', '.fc-day-header', function(e) {
     let day = $(this).text().toLowerCase();
     $('.fc-day').removeClass('selected')
                 .filter('.fc-' + day)
                 .addClass('selected')
 });

DEMO