javascript - Google calendar events not showing up on FullCalendar -
i trying calendar on website syncs data on google calendar , displays on webpage.
to so, i've used fullcalendar , followed steps on documents. calendar not displaying events googlecalendar.it's blank. i've got api, id, , not set private.
<html> <head> <title>calendario fiscal</title> <!--fullcalendar dependencies--> <link href='fullcalendar/fullcalendar.css' rel='stylesheet' /> <link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/> <script src='fullcalendar/gcal.js'></script> <!--jquery--> <script src='jquery/jquery-1.9.1.min.js'></script> <script src='jquery/jquery-ui-1.10.2.custom.min.js'></script> <!--fullcalendar--> <script src='fullcalendar/fullcalendar.min.js'></script> <script type="text/javascript"> $(document).ready(function() { var date = new date(); var d = date.getdate(); var m = date.getmonth(); var y = date.getfullyear(); var calendar = $('#calendar').fullcalendar( { googlecalendarapikey: 'mykey', header: { left: "prev,next today", center: "title", right: "month,agendaweek,agendaday" }, defaultview: "month", selectable: false, selecthelper: false, events: { googlecalendarid: "myid" } }); }); </script> </head> <body> <div id="calendar"> </div> </body> </html> /////////update//////////// following @victor rocheron's suggestion, here's have:
` <!doctype html> <html> <title>calendario fiscal</title> <link href='fullcalendar/fullcalendar.css' rel='stylesheet' /> <link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/> <script src='fullcalendar/gcal.js'></script> <script src='jquery/jquery-1.9.1-min.js'></script> <script src='jquery/jquery-ui-1.10.2.custom.min.js'></script> <script type="text/javascript"> function dorequest(options, printresult){ var x = new xmlhttprequest(); x.open(options.method, options.url); x.onload = x.onerror = function(){ printresult( (x.responsetext || '') ); }; x.send(options.data); } (function(){ dorequest({ method:'get', url: 'https://www.google.apis.com/calendars/myid@group.calendar.google.com/events?key=mykey', }, function printresult(result){ result = json.parse(result); var i; var str,end; eventslist = { events: [] } for(i=0;i < result.items.length;i++) { str = result.items[i].start.datetime; end = result.items[i].end.datetime; eventslist.events.push({ "title": result.items[i].summary, "start":str, "end":end, "description": result.items[i].description }); } var myevents = eventslist.events; $('#calendar').fullcalendar({ header: { left: 'prev,next today controle', center: 'title', right: 'month,agendaweek,agendaday' }, defaultview: 'agendaweek', timezone: "europe/paris", selectable:true, selecthelper:true, mintime:"07:00:00", maxtime:"21:00:00", contentheight: 685, lang: 'fr', select: function(start, end) { var title = prompt('event title:'); var eventdata; if(title) { eventdata = { title: title, start: start, end: end, description: description }; $('#calendar').fullcalendar('renderevent', eventdata, true); //stick?=true } $('#calendar').fullcalendar('unselect'); }, editable:true, eventlimit: true, //allow "more" link when many eventsevents: myevents }); settimeout("$('.fc-today-button').click();", 50); </script> <style type="text/css"> body{ margin-top: 40px; text-align: center; font-size: 14px; font-family: "lucida grande",helvetica,arial,verdana,sans-serif; } #calendar{ width: 900px; height: auto; margin: 0 auto; } </style> <body> <div id="calendar"> </body> </html> ` i'm not grasping problem is.
here implementation did several months ago, replace <--yourid--> , <--yourkey--> yours , tell me if work
https://jsfiddle.net/cw48ssyn/
javascript :
function dorequest(options, printresult) { var x = new xmlhttprequest(); x.open(options.method, options.url); x.onload = x.onerror = function() { printresult( (x.responsetext || '') ); }; x.send(options.data); } (function() { dorequest({ method: 'get', url: 'https://www.googleapis.com/calendar/v3/calendars/<---yourid-->/events?key=<--yourkey-->', }, function printresult(result) { result = json.parse(result); var i; var str,end; eventslist = { events: [] } for(i=0;i < result.items.length;i++) { str = result.items[i].start.datetime; end = result.items[i].end.datetime; eventslist.events.push({ "title": result.items[i].summary, "start": str, "end": end, "description": result.items[i].description }); } var myevents = eventslist.events; $('#calendar').fullcalendar({ header: { left: 'prev,next today controle', center: 'title', right: 'month,agendaweek,agendaday' }, defaultview: 'agendaweek', timezone: "europe/paris", selectable: true, selecthelper: true, mintime:"07:00:00", maxtime:"21:00:00", contentheight: 685, lang: 'fr', select: function(start, end) { var title = prompt('event title:'); var eventdata; if (title) { eventdata = { title: title, start: start, end: end, description: description }; $('#calendar').fullcalendar('renderevent', eventdata, true); // stick? = true } $('#calendar').fullcalendar('unselect'); }, editable: true, eventlimit: true, // allow "more" link when many events events: myevents }); settimeout("$('.fc-today-button').click();", 50); }); })();
Comments
Post a Comment