イベントを毎日、毎回繰り返したい月と毎週。 fullcalendarのドキュメントによると、イベントのレンダリング中にダウパラメータを使用してイベントを毎週繰り返すことができます。それで、私はこれを次のコードで毎日繰り返すためにも使用しました。
[[id:7718, type:null,
resourceIds:[13],
title:Kas,
start:2016-08-10T07:00:00.000+05:45,
end:2016-08-10T22:00:00.000+05:45,
allDay:false,
note:dsadsa,
member:,
dow:[0,1,2,3,4,5,6],
ranges:[[start:2016-08-10T07:00:00.000+05:45, end:2021-08-10T07:00:00.000+05:45]],
]]
それらを毎月、毎年繰り返すようにする方法はありますか？任意の助けいただければ幸いです。
回答：
回答№1は2私は、この質問に興味がある新しい人々のためにここに残します） dbのレコードを複製せずに定期的なイベントを追加するためのちょっとしたトリック。
「誕生日パーティー」は毎年恒例のイベントで、 「ミーティング」は毎月のイベントで、 「繰り返しイベント」はカスタムイベントであり、2回繰り返します。 「Click for Google」は毎週月曜日と金曜日に繰り返されるイベントです
var defaultEvents = [
{
// Just an event
title: "Long Event",
start: "2017-02-07",
end: "2017-02-10",
className: "scheduler_basic_event"
},
{
// Custom repeating event
id: 999,
title: "Repeating Event",
start: "2017-02-09T16:00:00",
className: "scheduler_basic_event"
},
{
// Custom repeating event
id: 999,
title: "Repeating Event",
start: "2017-02-16T16:00:00",
className: "scheduler_basic_event"
},
{
// Just an event
title: "Lunch",
start: "2017-02-12T12:00:00",
className: "scheduler_basic_event",
},
{
// Just an event
title: "Happy Hour",
start: "2017-02-12T17:30:00",
className: "scheduler_basic_event"
},
{
// Monthly event
id: 111,
title: "Meeting",
start: "2000-01-01T00:00:00",
className: "scheduler_basic_event",
repeat: 1
},
{
// Annual avent
id: 222,
title: "Birthday Party",
start: "2017-02-04T07:00:00",
description: "This is a cool event",
className: "scheduler_basic_event",
repeat: 2
},
{
// Weekday event
title: "Click for Google",
url: "http://google.com/",
start: "2017-02-28",
className: "scheduler_basic_event",
dow: [1,5]
}
];
// Any value represanting monthly repeat flag
var REPEAT_MONTHLY = 1;
// Any value represanting yearly repeat flag
var REPEAT_YEARLY = 2;
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
editable: true,
defaultDate: "2017-02-16",
eventSources: [defaultEvents],
dayRender: function( date, cell ) {
// Get all events
var events = $("#calendar").fullCalendar("clientEvents").length ? $("#calendar").fullCalendar("clientEvents") : defaultEvents;
// Start of a day timestamp
var dateTimestamp = date.hour(0).minutes(0);
var recurringEvents = new Array();
// find all events with monthly repeating flag, having id, repeating at that day few months ago
var monthlyEvents = events.filter(function (event) {
return event.repeat === REPEAT_MONTHLY &&
event.id &&
moment(event.start).hour(0).minutes(0).diff(dateTimestamp, "months", true) % 1 == 0
});
// find all events with monthly repeating flag, having id, repeating at that day few years ago
var yearlyEvents = events.filter(function (event) {
return event.repeat === REPEAT_YEARLY &&
event.id &&
moment(event.start).hour(0).minutes(0).diff(dateTimestamp, "years", true) % 1 == 0
});
recurringEvents = monthlyEvents.concat(yearlyEvents);
$.each(recurringEvents, function(key, event) {
var timeStart = moment(event.start);
// Refething event fields for event rendering
var eventData = {
id: event.id,
allDay: event.allDay,
title: event.title,
description: event.description,
start: date.hour(timeStart.hour()).minutes(timeStart.minutes()).format("YYYY-MM-DD"),
end: event.end ? event.end.format("YYYY-MM-DD") : "",
url: event.url,
className: "scheduler_basic_event",
repeat: event.repeat
};
// Removing events to avoid duplication
$("#calendar").fullCalendar( "removeEvents", function (event) {
return eventData.id === event.id &&
moment(event.start).isSame(date, "day");
});
// Render event
$("#calendar").fullCalendar("renderEvent", eventData, true);
});
}
});#calendar {
width: 100%;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js"></script>
<div id="calendar"></div>
</body>
</html>回答№2の場合は0
上手... 残念ながら、viewRenderイベントを使用して、現在の年を日付に割り当てる必要があります。 これは長い間待ち望まれていた機能です; "-（ 別の方法で発見した場合は、教えてください！ この別の質問でも同じです： リンク.