I am using the FullCalendar plugin for one of my projects. When user clicks on one area of the calendar then it shows a popup with input and Appointment button. When user clicks on the Appointment button then makeAppointment function is called where I simply echo startDate to the console.
For the first time when user clicks on the Appointment button, it logs selected date and time. When user selects "second date and time" and clicks on Appointment button on popup, it shows two dates and times i.e. one previous date and time and one currently selected date and time. Same goes for third and forth time. Why it has this behavior and how can I fix it?
Here is my code
var Calendar = {
init: function () {
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay',
ignoreTimezone: false
},
select: this.select
});
},
select: function (startDate, endDate, allDay, jsEvent, view) {
Calendar.Dialog.init(startDate, endDate);
},
Dialog: {
init: function (startDate, endDate) {
this.show();
$('.overlay').on('click', function () { Calendar.Dialog.close() });
$('#appointmentButton').on('click', function () { Calendar.Dialog.makeAppointment(startDate, endDate) });
},
//show and close functions are here
makeAppointment: function (startDate, endDate) {
console.log(startDate);
}
}
}
Try to check first if the Dialog has been initialized, otherwise don't do it again.
var Calendar = {
init: function () {
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay',
ignoreTimezone: false
},
select: this.select
});
},
initialized: false,
select: function (startDate, endDate, allDay, jsEvent, view) {
if (this.initialized === false) {
this.initialized = true;
Calendar.Dialog.init(startDate, endDate);
}
},
Dialog: {
init: function (startDate, endDate) {
this.show();
$('.overlay').on('click', function () { Calendar.Dialog.close() });
$('#appointmentButton').on('click', function () { Calendar.Dialog.makeAppointment(startDate, endDate) });
},
//show and close functions are here
makeAppointment: function (startDate, endDate) {
console.log(startDate);
}
}
}
Related
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
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.
Before questioning, I reveal that I am a beginner.
I'm using fullCalendar for the first time.
When I clicked on the date, I made the event registration.
var calendar = $('#calendar').fullCalendar
({
dayClick: function (date, allDay, jsEvent, view)
{
$('#calendar').fullCalendar('renderEvent',
{
title : '휴진',
allDay : true,
start: date, //specify start date
stick : true,
backgroundColor: '#fe4978'
});
}
});
This code allows duplication in event registration.
Once an event is registered for a specific date, I would like to prevent the event from being registered thereafter.
I have seen docs related to removeEvent, but I do not know how to write the code.
I would really appreciate it if you could give me a guide.
This could help you #won.
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('clientEvents', function(event) {
if(event.start <= date && event.end >= date) {
return true;
}
return false;
});
}
});
Updated:
Add a function before you store the selected event into the object.
function IsDateHasEvent(date) {
var allEvents = [];
// add your calendar events into the array.
allEvents = $('#calendar').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
return +v.start === +date;
});
return event.length > 0;
}
and change your code as follows.
dayClick: function (date, allDay, jsEvent, view) {
if (!IsDateHasEvent(date)) {
// No previous event on this date.
selectedDate = date;
eventData = {
title: title,
start: start,
stick : true,
backgroundColor: '#fe4978',
overlap: false,
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
// add new appointment code.
//$("#divAddNewAppointment").dialog("open");
}
else {
//$('<%= "#" + lblMessage.ClientID%>').html(" your error msg");
$('#calendar').fullCalendar('unselect');
$("#divMessage").dialog("open");
}
}
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');
},
INTRO
Hey, I'm writing page using jquery fullcalendar to display events from my Salesforce org. I'm struggling to implement conditional rendering of events which happen to be on the exact same time in calendar, what looks like this:
SPECIFICATION
The green on the left represent working hours of dentist and after clicking one of them user is redirected to fill out the form, after that there is created event which is marked as red one.
PROBLEM
I would like to implement function or whatever makes sense to remove, or overlap the events on the left side (green or red). Is there any specific concept I should be using ? Thanks for your time.
Here is a code which I wrote :
function getEventData(dentistId) {
alert(dentistId);
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.CalendarController.eventData}', dentistId,
function(result, event){
if (event.status) {
evt = JSON.parse(result);
console.log(evt);
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listDay',
},
eventClick: function (calEvent, jsEvent, view) {
if(calEvent.editable === true) {
var start = moment(calEvent.start).format('YYYY-MM-DD HH:mm:ss');
var end = moment(calEvent.end).format('YYYY-MM-DD HH:mm:ss');
jQuery('[id$=startStringField]').val(start);
jQuery('[id$=endStringField]').val(end);
passToController();
} else {
return false;
}
},
eventOverlap: false,
defaultDate: $('#calendar').fullCalendar('today'),
navLinks: true,
events: evt,
eventRender: function(event, element) {
element.qtip({
content: event.description
});
},
textColor: 'white',
height:650,
})
} else if (event.type === 'exception') {
console.log(event.message);
} else {
console.log(event.message);
}
},
{escape: false}
);
}
The result is a string in json format which represent array of events to be displayed which are then parsed:
Json which is parsed to array of objects