Develop Reference

Adding a button to each cell in fullcalendar to allow user to add an event using jQuery

I have been using jQuery along with fullcalendar to create a calendar that displays events from a database using php and MYSQL.
The calendar looks like this.
The events are shown in red. I would like to be able to add a button in each of the cells that do not have an event to allow the user to be able to add one.
Here is the code I have tried
viewRender: function (view) {
$(".fc-content").append('<button>Add</button>')
}
my full code.
$(document).ready(() => {
const calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
defaultTimedEventDuration: '01:00',
allDaySlot: false,
scrollTime: '09:00',
businessHours: {
dow: [ 2, 3, 4, 5, 6 ],
start: '09:00',
end: '17:30'
},
//viewRender: function (view) {
// $(".fc-content").append('<button>Book</button>');
// },
long: /^en-/.test(navigator.language) ? 'en' : 'zh-cn',
eventOverlap: (stillEvent, movingEvent) => {
return true;
},
events:
<?php echo $json;?>
//'2018-12-12T15:00+08:00'
//},
//{
//title: '',
//start: '' //'2018-12-12T12:00+08.00'
,
eventColor: '#FF0000',
edittable: true,
selectable: true,
selectHelper: true,
select: (start, end) => {
const duration = (end - start) / 1000;
if(duration == 1800){
// set default duration to 1 hr.
end = start.add(30, 'mins');
return
calendar.fullCalendar('select', start, end);
}
let eventData;
if (title && title.trim()) {
eventData = {
title: title,
start: start,
end: end
};
calendar.fullCalendar('renderEvent', eventData);
}
calendar.fullCalendar('unselect');
},
eventRender: (event, element) => {
const start = moment(event.start).fromNow();
element.attr('title', start);
},
loading: () => {}
});
});

Ok first off, unless the button is required from UI/UX perspective, you can skip adding the button and just work with fullCalendars built-in method/events.
example (skipping irrelevant options):
fullCalendar({
...
editable: true,
selectable: true, // makes each day selectable
select: function (start, end) {
// in this select callback you are given the start and end dates of the user's selection
// when a user selects any cells this will fire and you can do stuff in here
// fullcalendar will always give 2 dates as callback, even if the user only selected 1
// date, the 'end' will correspond to the next day actually...
events: [{event1},{event2},{event3}], // use this to initialize the events already //existing
eventClick: function (event) {
// this is the handler that will run when the user clicks on an event, not a day! an //event on a day
}
}
})
I hope this helps, you can always read more on the docs

You do not need button ..
you can do it in function eventClick this trigger in click on any day
$('#calendar').fullcalendar({
eventClick : function(xEvent, jsEvent, view){ hus_eventClick(xEvent, jsEvent, view);} ,
});
and in function show dialog box to add event ..
https://fullcalendar.io/docs/dayClick

FullCalendar trying to fetch events from URL instead of array

Using FullCalendar v3.9.0 with jQuery v3.3.1. I have a SailsJS application that's getting the calendar data from MySQL.
this.me.calendar from MySQL currently looks like this.
[{"start":"2018-07-04T13:30:00","end":"2018-07-04T18:00:00","works":["2"]}]
And my FullCalendar code looks like this.
let that = this;
that.me.calendar = this.me.calendar;
$('#calendar').fullCalendar({
header: {
left: 'today prev,next',
center: 'title',
right: 'agendaWeek,agendaDay'
},
views: {
week: {
titleFormat: 'DD.MM.YYYY'
}
},
defaultView: 'agendaWeek',
locale: 'fi',
weekends: false,
scrollTime: '07:00',
businessHours: {
start: '7:00',
end: '21:00',
},
events: function(start, end, timezone, callback) {
let events = that.me.calendar ? that.me.calendar : [];
console.log(events);
callback(events);
},
editable: true,
selectable: true,
selectHelper: true,
select: (start, end) => {
let duration = (end - start) / 1000;
if (duration == 1800) {
// Set default duration to 1 hour
end = start.add(30, 'mins');
return $('#calendar').fullCalendar('select', start, end);
}
let eventData = {
start: start,
end: end,
works: []
}
$('#calendar').fullCalendar('renderEvent', eventData);
$('#calendar').fullCalendar('unselect');
},
eventClick: (event, element) => {
$('#event-works').text(event.works.join(','));
$('#start-date').text(moment(event.start).format('d.MM.YYYY HH:mm'));
$('#end-date').text(moment(event.end).format('d.MM.YYYY HH:mm'));
$('#workModal').modal('show');
$('#add-work-to-event').click(() => {
let work = $('#work').val();
if(_.includes(event.works, work)) return;
event.works.push(work);
$('#event-works').text(event.works.join(','));
});
}
});
While the code above doesn't send the GET, it doesn't display the events in the calendar. However, if I change the events to events: this.me.calendar, the SailsJS console displays GET /account/%22[%7B/%22start/%22:/%222018-07-04T13:30:00/%22,/%22end/%22:/%222018-07-04T18:00:00/%22,/%22works/%22:[/%222/%22]%7D]%22 (1ms 404).
I also tried changing it to events: JSON.stringify(this.me.calendar), which still gave the GET request in console.
If I enter the array in the events on it's own, it is working. Also the console.log inside the events function is returning the same array.
Is there a way for me to simply enter my array for FullCalendar, or do I have to make it get the JSON from an URL?

I managed to solve the issue by changing the let events inside of my events function to let events = that.me.calendar ? JSON.parse(that.me.calendar) : []; and now the events are being displayed.

How to register an event using addEventSource in fullCalendar?

When I click on the dayClick, I want to add an event to the clicked date.
I have the following JS code:
$('#calendar').fullCalendar({
header: {
center: "title", // 센터에는 타이틀 명이 오고
left: "prev", // 왼쪽에는 < 버튼이 오고
right: "next" // 오른쪽에는 > 버튼이 오게됌
},
lang: 'ko', // 달력 한글 설정
editable: true, // 달력의 이벤트를 수정할 수 있는지 여부를 결정
dayClick: function(date, allDay, view) // 일 클릭시 발생
{
var dateFormat = date.format('YYYY-MM-DD');
if (confirm('Do you want to register as closed?')) {
// Register event
} else {
alert('You Click No');
}
}
});
//Register event this part, how do I add the code?
I've been very careful with the "select" feature, but the functionality I want to implement is simple, so I prefer using "addEventSource" rather than "select".
But I am a beginner of jquery and javascript, so I do not know how to write it.
Please guide me on how to write code.
And I would really appreciate it if you could give me a link to a site or question I could refer to.
(Oh, note that all title values for events to be registered are "closed")

Set the following options for fullcalendar. See select demo.
selectable: true,
selectHelper: true,
select: function (start, end, jsEvent, view) {
var title = 'Some Event';
var eventData = {
title: title,
start: start,
end: end
};
if (confirm('Do you want to register as closed?')) {
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
} else {
alert('You Click No');
}
$('#calendar').fullCalendar('unselect');
},
Setting the select callback allows the use to click and drag to select multiple dates and set an event.
To allow only single day events, restrict the user to only clicks by setting dayClick option for fullcalendar instead.
dayClick: function (start, end, jsEvent, view) {
var title = 'Some Event';
var eventData = {
title: title,
start: start,
};
if (confirm('Do you want to register as closed?')) {
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
} else {
alert('You Click No');
}
$('#calendar').fullCalendar('unselect');
},

Display date from database using jquery fullcalendar

I'm using the jquery fullcalendar plugin. I can display dynamic dates on a button click. The issue I have now is when loading the dates from the db all the dates populate just one day.
Here is the code with the call to the web service:
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: 'DAL/WebService1.asmx/GetEvents',
allDay:false
});
Here is the date from that web method

$('#calendar').fullcalendar('renderEvent',event_object,'stick')
This will attach your event to its date on the calendar. The event_object only needs a title and a start date to be valid, but I'd suggest adding an id to make editing/deleting easier.
Render event documentation

Figured out how to get the calendar to render dates separately with this code here. Hopefully helps somebody in the future
var events = [];
$('#calendar').fullCalendar({
events: function (start, end, timezone,callback) {
$.ajax({
url: 'DAL/WebService1.asmx/GetEvents',
dataType: 'json',
success: function (data) {
console.log(data);
var events = [];
$(data).each(function (index, d) {
events.push({
title: d.title,
start: d.startDate
});
});
callback(events);
}
});
}
});

How can I populate a calendar with javascript?

I'm trying to develop an application where I need to use this calendar : http://fullcalendar.io/
The problem is that I can populate it manually, but I can't populate it from my Database.
This is the function that populates the calendar:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventLimit: true,
events:[
{
title: "aaaa",
start: "2014-12-12"
},
{
title: "bbb",
start: "2014-12-13"
}
]
});
});
and this is the function that allows me to get my data from the Database:
function getEvents(db){
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM NOTES', [], function (tx, results) {
// var allEvents = [];
var allEvents=[];
for (var i = 0; i < results.rows.length; i++){
//var event = {};
allEvents.push({
title: results.rows.item(i).note,
start: results.rows.item(i).whenn
});
}
$.each(allEvents, function(idx, obj){
alert(obj.title);
});
}, null);
});
};
When i call the function getEvents(db) in events, it shows me the alerts but doesn't populate the calendar.
PS: I can't use php files.

You can use renderEvent
.fullCalendar( 'renderEvent', event [, stick ] )
which, as the name suggests, renders a new event on the calendar.
According to the docs, event must be an Event Object with a title and start at the very least. Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar.
For you, I guess this would translate to something like:
$.each(allEvents, function(idx, obj){
$('#calendar').fullCalendar( 'renderEvent', obj);
});
I've not used fullCalendar, but if this doesn't work, make a fiddle of what you've got and I'll make you a working example.