I needed to make Google calendars look nice for a client, so I used Fullcalendar and it now looks great, thanks!
I have one problem though:
When I click on an event, the details display the GMT time. I tried a few things, but I am definitely not a developer, so I need help :)
Any help would be greatly appreciated! Here is my js code so far:
$(document).ready(function() {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
googleCalendarApiKey: 'my api key',
events: 'my event',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=600,height=400');
return false;
$scope.start = event;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
$(document).ready(function() {
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: 'my calendar xml link',
dataType: 'xml',
data: {
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
},
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
googleCalendarApiKey: 'my api key',
events: 'my calendar id',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=600,height=400');
return false;
$scope.start = event;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
Related
I created a fullcalendar5, everything works fine, calendar is showing very well, event added successfully, only event showing remains, I want to show beside event an hour, even I add allDay: false ,it not showing.
the image i want
var booking = #json($events);
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'fr',
eventDisplay: 'block',
initialView: 'dayGridMonth',
eventColor: 'orange',
events: booking,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
});
$('#add-event').on("click", function(){
var titre = $('#titre').val();
var datee = $('#date').val();
var comment = $('#comment').val();
$.ajax({
url:"{{ url('/events') }}",
type:"POST",
dataType:'json',
data:{ titre, datee, comment, "_token": "{{ csrf_token() }}" },
success:function(response){
console.log(response);
$('#exampleModal').modal('hide');
calendar.addEvent({
title: titre,
start: datee,
allDay: false
});
},
error:function(error){
console.log(error);
},
});
});
calendar.render();
});
How can I save the data? In json or in any other format.
Its demo fullcalendar
Docs Date Clicking & Selecting
My main page:
Html code where i load data from list:
.
<html><head>
<meta charset="utf-8">
<link href="../lib/main.css" rel="stylesheet">
<script src="../lib/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
select: function(arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
eventClick: function(arg) {
if (confirm('Are you sure you want to delete this event?')) {
arg.event.remove()
}
},
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2020-09-01'
},
{
title: 'Long Event',
start: '2020-09-07',
end: '2020-09-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-09T16:00:00'
}
]
});
calendar.render();});
</script>
</head>
<body class="">
<div id="calendar" class="fc fc-media-screen fc-direction-ltr fc-theme-standard"><div class="fc-header-toolbar fc-toolbar fc-toolbar-ltr"><div class="fc-toolbar-chunk"><div class="fc-button-group">
</body></html>
You need to query data using calendar.getEvents() and then save the file using e.g. How do I save JSON to local text file
Try to put more effort into reading the docs, FullCalendar has a very nice documentation.
I have been trying to get fullcalendar to react to polling for new events, but whenever it calls refetchEvents, if I am dragging or resizing something, it stops me, as if I have released the mouse at the position I am in, which moves or resizes the event respectively to the wrong spot.
I have a jsfiddle, to show this in action.
Here is the code, if it helps:
$(document).ready(function() {
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [{
title: 'event1',
start: '2017-01-26T08:00:00',
end: '2017-01-26T10:00:00'
}, {
title: 'event2',
start: '2017-01-05',
end: '2017-01-07'
}, {
title: 'event3',
start: '2017-01-09T06:30:00',
end: '2017-01-09T09:30:00',
}]
});
});
setInterval(function() {
$('#calendar').fullCalendar('refetchEvents');
console.log('refetchEvents called');
}, 5000);
May be not the most efficient, using fetchEventsLock reference on eventDragStart and eventDragStop and fetch events only when released === false.
var fetchEventsLock = false;
$(document).ready(function () {
/* initialize the calendar
-----------------------------------------------------------------*/
function toggleLock() {
fetchEventsLock = !fetchEventsLock;
console.log('Set To ' + fetchEventsLock)
}
$('#calendar').fullCalendar({
eventDragStart: toggleLock,
eventDragStop: toggleLock,
/* Other option removed */
});
});
setInterval(function () {
if (fetchEventsLock === false) {
$('#calendar').fullCalendar('refetchEvents');
console.log('refetchEvents called');
}
}, 5000);
I'm having 2 weird issues with my popovers shown here in fiddle
After I have selected a day (in fullcalendar) and the popover shows, I click the day again to hide the popover, then I click again in the same day to show again, but no popover!. It's after I click to show, hide, then click to show again that I'm having issues.
When I click on an eventLimitClick event inside a day (April 20th in fiddle), then click on the day (April 20th). The popover hides after I click the day, but then doesn't show any popover for the day like it should.
Here is some of the logic, but please refer to the fiddle link above for working code.
var $calPopOver;
$('#fullcalendar').fullCalendar({
header: {
left: 'prev,next', //today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
eventLimit: 1,
events: function(start, end, timezone, callback) {
$.ajax({
url: '/ManageSpaces/GetDiaryEvents/',
dataType: 'json',
data: {
start: start.format(),
end: end.format(),
id: $("#HiddenYogaSpaceId").val()
},
success: function(doc) {
var events = [];
$(doc).each(function() {
events.push({
title: "1 Event", //$(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
},
eventLimitText: function(numberOfEvents) {
return numberOfEvents + " Events";
},
eventLimitClick: function(cellInfo, jsEvent) {
$(cellInfo.dayEl).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#events-popover-head").html();
},
content: function() {
return $("#events-popover-content").html();
}
});
//$(cellInfo.dayEl).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(cellInfo.dayEl).popover('show');
},
eventClick: function(calEvent, jsEvent, view) { //function (data, event, view) {
//var s = cellInfo.segs;
$("#eventDetails.collapse").collapse('toggle');
if ($calPopOver)
$calPopOver.popover('destroy');
},
dayClick: function(data, event, view) {
$dayClickedDate = data.format();
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#day-popover-head").html();
},
content: function() {
return $("#day-popover-content").html();
}
});
//$(this).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(this).popover('show');
}
});
Maybe you can look into these bootstrap examples. If you can manage to get a copy of the examples, it's simple a copy and paste scenario IMO.
http://getbootstrap.com/javascript/
Search for "Popovers popover.js" on this page and scroll a bit down for the examples.
FullCalendar v2.2.5, I want to use my JSON generating script to pull data only for the visible area of the calendar as mentioned in a few other questions.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '2015-01-06',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
//events: {
// url: 'instant-tools.cgi',
// type: 'POST',
// data: {
// events: 1,
// pending: 1,
// from: '2014-01-01',
// to: '2016-12-31',
// }
// },
viewRender: function(view, element) {
var events_slice = new Object();
events_slice.eventSources = [
{
url: 'instant-tools.cgi',
type: 'POST',
data: { events: 1, pending: 1, from: '2014-01-01', to: '2016-12-31' }
}
];
$('#calendar').fullCalendar('addEventSource', events_slice);
//$('#calendar').fullCalendar('renderEvents');
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});
The commented out events definition works (when I use it) but the viewRender one does not. Before you ask viewRender does get triggered. I get no errors in the console and no events displayed. My script is not called at all. I know I have the dates hardcoded right now but I will use view.intervalStart and view.intervalEnd once I verify I get a similar result. Having $('#calendar').fullCalendar('renderEvents'); in there makes no difference, also toggling lazyFetching does not make a difference. Not a JS coder so I hope I'm just being silly somewhere.
in the event property you need to call the function
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '$today',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
events: function(start, end, timezone, callback) {
$.ajax({
url: 'instant-tools.cgi',
data: {
events: 1,
pending: 1,
from: '2014-01-01',
to: '2016-12-31',
},
success: function(doc) {
var obj = jQuery.parseJSON(doc);
var events = [];
$.each(obj, function(index, value) {
events.push({
id: value['id'],
//all data
});
//console.log(value)
});
callback(events);
},
error: function(e, x, y) {
console.log(e);
console.log(x);
console.log(y);
}
});
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});