如何自定义周日视图的完整日历？

正如你可以在图片中看到我想在头只工作日。

2017-06-12 Sagar Thakkar

我可以设置头，但如何设定每天的活动？因为我没有日期。 –

“如何设置一天的活动？”。我不知道你的意思。你问如何添加事件到日历？ – ADyson

@ADyson号我知道如何呈现事件。但假设我只想要周历（如图），那么我没有任何特定的日期事件。现在假设我想为周一9：00-10：00添加一个事件，那么我可以在事件列表中设置开始和结束参数？ –

我认为你正在寻找这样的：

$('#calendar').fullCalendar({ 
    defaultView: 'agendaWeek', 
    weekends: false // will hide Saturdays and Sundays 
});

这可以在基本使用文档中找到。 https://fullcalendar.io/docs/usage/

来源

2017-06-13 01:56:10

这将提供agendaweek日历而非星期几日历。检查https://fullcalendar.io/views/agendaWeek/，我不想隐藏任何日子，我只想要一个所有的周日历事件。 –

FullCalendar本身不具有重复事件的一个完整的概念。它将在一周中的多天内呈现事件，但无法使用更复杂的规则（例如“每个星期一”）重复它们。

为了克服这个问题，需要进行一些定制。幸运的是，这可以通过API完成，无需修改底层代码。一种方法是稍微改变您的活动对象的结构，然后编写一些自定义代码到fullCalendar的“eventRender”回调，使得读取自定义数据，并创建一个基于单一的“事件”对象，是在适当的重复事件喂它。

$(document).ready(function() { 
 
    var repeatingEvents = [{ 
 
    "id": "1", 
 
    "title": "Event 1", 
 
    //in "start and "end", only set times of day, not dates. 
 
    "start": "09:00", 
 
    "end": "10:00", 
 
    //use standard dow property to define which days of the week the event will appear on 
 
    "dow": "1", 
 
    //the custom "ranges" sets when the repetition begins and ends 
 
    "ranges": [{ 
 
     "start": "2017-06-01", 
 
     "end": "2017-06-30" 
 
    }], 
 
    "allDay": false 
 
    }, { 
 
    "id": "2", 
 
    "title": "Event 2", 
 
    "start": "10:00", 
 
    "end": "12:00", 
 
    "dow": "2", 
 
    "ranges": [{ 
 
     "start": "2017-05-10", 
 
     "end": "2017-07-16" 
 
    }], 
 
    "allDay": false 
 
    }, { 
 
    "id": "3", 
 
    "title": "Event 3", 
 
    "start": "15:00", 
 
    "end": "16:30", 
 
    "dow": "3", 
 
    "ranges": [{ 
 
     "start": "2017-06-01", 
 
     "end": "2017-06-30" 
 
    }], 
 
    "allDay": false 
 
    }]; 
 

 
    $('#calendar').fullCalendar({ 
 
    hiddenDays: [0], //hide Sundays as per your screenshot 
 
    minTime: "07:00", 
 
    maxTime: "22:00", 
 
    defaultView: 'agendaWeek', 
 
    events: repeatingEvents, 
 
    //custom code to create repeating events from the data 
 
    eventRender: function(event) { 
 
     return (event.ranges.filter(function(range) { // test event against all the ranges 
 

 
     return (event.start.isBefore(range.end) && 
 
      event.end.isAfter(range.start)); 
 

 
     }).length) > 0; //if it isn't in one of the ranges, don't render it (by returning false) 
 
    } 
 
    }); 
 
});

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script> 
 
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/gcal.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" rel="stylesheet" media="all" /> 
 
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" media="all" /> 
 

 
<div id='calendar'></div>

不幸的是这种解决方案并不适用于所有日事件工作，但除此之外，我希望这是有益的。

P.S.感谢这个答案对原来的解决方案：使用columnFormat =“dddd完整” https://stackoverflow.com/a/29393128/5947043

来源

2017-06-13 08:36:34 ADyson

如何自定义周日视图的完整日历？

回答

相关问题