I am implementing FullCalendar onto my MVC web application and have the basic calendar working. I am now attempting to add adding external events which i have working apart from when the first event is first dragged on, it isnt added into the database. if the event is moved or edited it however is entered.
Is there a way to make the event entered directly into the database when initially dragged in?
This is my current code for adding external events.
addExternalEvent: true,
eventDrop: function (event) {
var data = {
EventID: event.eventID,
Subject: event.title,
Start: event.start.format('DD/MM/YYYY HH:mm A'),
End: event.end != null ? event.end.format('DD/MM/YYYY HH:mm A') : null,
Description: event.description,
ThemeColor: event.color,
IsFullDay: event.allDay,
};
SaveEvent(data);
}
$('#external-events .fc-event').each(function () {
$(this).data('event', {
title: $.trim($(this).text()),
stick: true
});
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
});
Thanks in advance.
Related
I'm working with Full Calendar I want to create a button that take all the events from the calendar and send them to my database. But when trying to call the getEvents method referenced here from the calendar object, I cannot get it to work. The method doesn't seem to exist. I get undefined method.
Below is a snippet of the initialization of the calendar.
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'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-16T16:00:00'
},
{
title: 'Conference',
start: '2020-09-11',
end: '2020-09-13'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-09-28'
}
]
});
calendar.render();
I use the last version of Full Calendar (v5)
When I try to create a button that will get the calendar then retrieve all the events and send it to my database I get error saying that the function doesn't exist.
Here is how I do that :
var calendar = document.getElementById("calendar");
/* I can do that since I have my calendar with the id "calendar"
And then I try use the getEvents function
*/
var events = calendar.getEvents();
/* Show undefined */
<div id="calendar"></div>
Super Important Note: I realized that the function doesn't exist since I try to apply it to the HTML element and not the FullCalendar JS object. So my question is how can I get a FullCalendar JS Object from the HTML element in order to retrieve the events that the user has saved ??
Your problem is because var calendar = document.getElementById("calendar"); fetches the HTML element into which the rest of the calendar's HTML was added by fullCalendar. It does not fetch the fullCalendar instance which was generated by new FullCalendar.Calendar when you intialised the calendar. It's the latter which exposes the functions to manipulate the calendar or get data from it.
Notice how you already use that object in your code to call fullCalendar's render function, e.g. calendar.render();.
(The HTML element object just contains standard functions found on any HTML element, not anything specific to fullCalendar.)
So in summary you need to use the calendar variable you created from the new FullCalendar... instantiation. If you need access to that outside the scope it was originally declared in (which is the callback of the DOMContentLoaded event handler), then one way round that is to make it a global variable, e.g.
var calendar; //global variable
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
....
});
calendar.render();
});
Then somewhere else in your code, wherever you need it, you can write
var events = calendar.getEvents();
For a small project I want to add events at runtime.
The actual calendar is created with data from a database. The separate script creates additional events, which are created dynamically at runtime of the calendar. These events should be added to the existing calendar afterwards.
For testing I have a calendar and an external button. If you click on the button, an event should be added to the calendar. Calendar is created and the click is recognized. But no event is added.
Where is the thought error?
The HTML
<button class="holiday">Add Feiertage</button>
<div id='calendar'></div>
The Code:
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'
},
initialDate: '2020-11-12',
businessHours: true, // display business hours
editable: true,
events: [
{
title: 'Business Lunch',
start: '2020-11-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2020-11-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
{
title: 'Conference',
start: '2020-11-18',
end: '2020-11-20'
},
{
title: 'Party',
start: '2020-11-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
groupId: 'availableForMeeting',
start: '2020-11-11T10:00:00',
end: '2020-11-11T16:00:00',
display: 'background'
},
{
groupId: 'availableForMeeting',
start: '2020-11-13T10:00:00',
end: '2020-11-13T16:00:00',
display: 'background'
},
// red areas where no events can be dropped
{
start: '2020-11-18',
title: 'Test-Holiday',
overlap: false,
display: 'background',
color: '#ff9f89'
}
]
});
calendar.render();
});
// external events by Click
jQuery(document).ready(function($) {
$('.holiday').on('click', function() {
console.log('klick');
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl);
//var src = calendar.getEventSources(); // give me a empty array
calendar.addEventSource(
{
events: [ // put the array in the `events` property
{
title : 'Test-Event',
start : '2020-11-11',
overlap: false,
display: 'background',
color: '#ff9f89'
}
]
});
calendar.refetchEvents();
});
});
});
Here is my Test:
https://jsfiddle.net/LukasHH/tu14xfwr/
The calendar variable you're using for calendar.addEventSource refers to a different FullCalendar instance than the one which is shown on your page. You have created a completely new calendar - but then didn't render it to the page. That's why you don't get errors, but also nothing useful happens.
The original calendar is defined and populated inside your document.addEventListener('DOMContentLoaded', function() { block, but you tried to create a new one inside your jQuery(document).ready(function($) { block. You need to use the existing reference to calendar - but of course it's out of scope when you need it, because you're in a different code block.
Now, document.addEventListener('DOMContentLoaded', function() { and jQuery(document).ready(function($) { are essentially equivalent, it's just that one is written in native JS and one is jQuery syntax. They basically do the same task - i.e. delay execution of the code until the DOM is completely loaded. Therefore it doesn't make much sense or add any value to have both of them in the page at the same time. Just use one block to include all of your code, and then you won't have any scope problems regardless.
As well as that, for similar reasons it also makes no sense to have another document.addEventListener('DOMContentLoaded', function() { within the jQuery "ready" block! You simply don't need it. I can only assume you didn't understand what that code did and thought it was part of fullCalendar - it's not.
And
var i = calendar.initialEvents();
console.log(i);
makes no sense. There's no method called initialEvents in fullCalendar and you don't seem to be trying to use i for anything anyway, so you can just remove these lines.
e.g.
jQuery(document).ready(function($) {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
//...etc
});
calendar.render();
$('.holiday').on('click', function() {
calendar.addEventSource({
events: [ // put the array in the `events` property
{
title: 'Test-Event',
start: '2020-11-11',
overlap: false,
display: 'background',
color: '#ff9f89'
}
]
});
});
Demo: https://jsfiddle.net/32w4kLvg/
I am working on a project using bootstrap 4 and fullcalendar.io (version5.0.1).
I use "select" function to let user click on specific date to add event.
but I want to limit user to add one event only in fullcalendar.
I tried to get length of added event but fail.
code is here.
enter code here
document.addEventListener('DOMContentLoaded', function() {
var calendar = new FullCalendar.Calendar(calendarEl, {
select: function(arg) {
input_Form.classList.remove("collapse");
dateA.value=new Intl.DateTimeFormat('en-US').format(arg.start);
submitA.onclick=function(){
input_Form.classList.add("collapse");
if (textareaContent.value) {
calendar.addEvent({
title:textareaContent.value,
start: arg.start,
end: arg.end,
allDay: arg.allDay,
})
textareaContent.value="";
}
calendar.unselect()
};
},
eventClick: function(arg) {
input_Form.classList.remove("collapse");
textareaContent.value=arg.event.title;
submitA.onclick=function(){
input_Form.classList.add("collapse");
arg.event.remove()
if (textareaContent.value) {
calendar.addEvent({
title:textareaContent.value,
start: arg.event.start,
end: arg.event.end,
allDay: arg.event.allDay
})
textareaContent.value="";
}
calendar.unselect()
};
},
I have started using the fullcalendar plugin for a calendar display of mine.
The goal of the calendar is to allow the user to add events labled Accommodation or Canteen.
When my page loads, I use PHP to build an array that gets parsed to the JavaScript that displays the events.
What I would like to do is be able to display the Google Material Design icons with the matching event.
Accommodation will be the hotel icon.
Canteen will be the local dining icon.
Now in Google's documentation it shows that the icons can be applied using the following method:
<i class="material-icons">hotel</i>
However when passing events to the plugin, this does not seem to be possible.
The php where the array gets built:
$events = array();
while (!$result->eof()) {
if ($result->valueof('date_canteen_available') == 't') {
$events[] = array("title" => "Canteen", "start" => $result->valueof('date_date'));
}
if ($result->valueof('date_accommodation_available') == 't') {
$events[] = array("title" => "Accommodation", "start" => $result->valueof('date_date'));
}
Part of my javascript:
<script>
$('#calendarAccomo').fullCalendar({
header: {
},
defaultView: 'month',
editable: true,
selectable: true,
allDaySlot: false,
events: <?php echo json_encode($events) ?>,
</script>
My question is, how can I display the correct icon with each event entry?
You can do this:
$('#calendar').fullCalendar({
events: [{
title: 'Accommodation',
start: '2017-02-01',
description: 'This is a cool event'
}, {
title: 'Canteen',
start: '2017-02-02',
description: 'This is a cool event'
}],
eventRender: function(event, element, view) {
if (event.title == 'Accommodation') {
element.append('<i class="material-icons">hotel</i>');
} else {
element.append('<i class="material-icons">local_dining</i>');
}
}
});
Try the fiddle.
I am using meteor and fullcalendar. I am trying to use the dayClick:function in my template but it is not working.
I would like the dayClick to fire when I click on the day without the use of jQuery. I understand that the way the Template.....events is setup that it will not work. I clearly do not understand some(many)thing(s).
Template:
JS
Template.calendar2.helpers({
calendarOptions: {
// Standard fullcalendar options
height: 700,
hiddenDays: [],
slotDuration: '01:00:00',
minTime: '08:00:00',
maxTime: '19:00:00',
lang: 'en',
// Function providing events reactive computation for fullcalendar plugin
events: function(start, end, timezone, callback) {
//console.log(date);
//console.log(start);
//console.log(end);
//console.log(timezone);
var events = [];
// Get only events from one document of the Calendars collection
// events is a field of the Calendars collection document
var calendar = CalEvents.findOne(
{ "_id":"myCalendarId" },
{ "fields": { 'events': 1 } }
);
// events need to be an array of subDocuments:
// each event field named as fullcalendar Event Object property is automatically used by fullcalendar
if (calendar && calendar.events) {
calendar.events.forEach(function (event) {
eventDetails = {};
for(key in event)
eventDetails[key] = event[key];
events.push(eventDetails);
});
}
callback(events);
},
// Optional: id of the calendar
id: "calendar1",
// Optional: Additional classes to apply to the calendar
addedClasses: "col-md-8",
// Optional: Additional functions to apply after each reactive events computation
autoruns: [
function () {
console.log("user defined autorun function executed!");
}
]
},
});
Here is the event
Template.calendar2.events({
dayClick:function( date, allDay, jsEvent, view ) {
CalEvents.insert({title:'New Event',start:date,end:date});
Session.set('lastMod',new Date());
}
)};
I guess I didnt have a clear enough understanding of how full calendar works. I did not need to a click event to initiate an date/event. fullcalendar already has a way to do that with dayClick: function(); I just needed to place within calendaroptions{};
dayClick: function(date, jsEvent, view) {
CalEvents2.insert({title:'NEW', start:date._d, end:date._d});
Session.set('clickedDate', tempEvent);
IonModal.open('_cal2Modal');
},