は、私はあなたが見ることができるように表示されますが、(私のColdFusion .cfcという経由)カレンダーに私のカレンダーにGoogleの米国の休日を追加するには?
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" />
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script>
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script>
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script>
<script src="../fullcalendar-3.1.0/gcal.js"></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
googleCalendarApiKey:'my_api_key',
url: 'https://www.googleapis.com/calendar/v3/calendars/usa__en%40holiday.calendar.google.com/events?key=my_api_key',
events: "getLeaveRequests_byDept.cfc?method=getMyData",
timeFormat: ' ', // uppercase H for 24-hour clock
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
}
});
});
</script>
<title>Calendar</title></head>
<body>
<div id='calendar'>
</div>
</body>
</html>
を時間を残すことを完璧に働いfullCalendarを持って、私は次のように追加:gcal.jsファイル(Googleカレンダージャバスクリプト)そして、試してみて、私の他の日付と一緒に休日を追加するには、以下の2行:
googleCalendarApiKey:'my_api_key',
url: 'https://www.googleapis.com/calendar/v3/calendars/usa__en%40holiday.calendar.google.com/events?key=my_api_key',
は私の日付はまだ細かい表示するが、休日はカレンダーに表示されませんか?何か案は? 、
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" />
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script>
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script>
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script>
<script src="../fullcalendar-3.1.0/gcal.js"></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
nextDayThreshold:'00:00:00',
// display Leave Requests plus Holidays from Google calendar
googleCalendarApiKey: '* my api key *',
eventSources: [ 'getLeaveRequests.cfc?method=getMyData', 'en.usa#[email protected]' ],
timeFormat: ' ', // uppercase H for 24-hour clock
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
}
});
});
</script>
<title>Calendar</title></head>
<body>
<div id='calendar'>
</div>
</body>
</html>
私はgcal.jsに追加する必要がありました:
はここでここで働いていた最終的なコードである代わりに、「イベント」
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-3.1.0/fullcalendar.min.css" />
<script src="../fullcalendar-3.1.0/lib/jquery.min.js"></script>
<script src="../fullcalendar-3.1.0/lib/moment.min.js"></script>
<script src="../fullcalendar-3.1.0/fullcalendar.min.js"></script>
<script src="../fullcalendar-3.1.0/gcal.js"></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
googleCalendarApiKey: 'my_api_key',
eventSources: [
{
"getLeaveRequests_byDept.cfc?method=getMyData"
},
{
googleCalendarId: '[email protected]'
}
]
});
});
</script>
<title>Calendar</title></head>
<body>
<div id='calendar'>
</div>
</body>
</html>
の「eventSources」を使用する私の試みですGoogleのAPIキーを追加し、「イベント」を「イベントソース」に変更し、「{}」の代わりに「[]」を使用してください。
この答えは後でhttp://stackoverflow.com/a/35442698/5360631ソースを追加するための助けおよび/または試みること** eventSources:{ '?getLeaveRequests_byDept.cfc方法= getMyData'、 ' en.usa#[email protected] '} **対**イベント** https://fullcalendar.io/docs/event_data/eventSources/ – smcd