Develop Reference

Add URL to FullCalendar in React

I'm trying to add url to Fullcalendar in react ,I need when I click on one event that clic takes me to page details of that clicked event. the URL showns on the browser is correct but nothing appers because the browser is quickly refreshed. If anyone have any idea thanks for help.
//here some code
events.push(
{
title: '\n owner: '+reservation.user.fullname,
start: reservation.start_date,
end: reservation.end_date,
url: '/reservation/details/' + reservation.id + '/' + reservation.space.category.name,
},
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: evt,
timezone: 'UTC',
});

You should use the React version, don't mix it with jQuery
https://fullcalendar.io/docs/react

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 meteor events not rendering properly

I've been working on a project for some time now with meteor and fullcalendar. I've managed to display the events on the calendar, but they dont show as soon as I add them to my collection, not even after I refresh the page, they only show if I click to change the date from the calendar, this is the image show the calendar with no events, but in the console we can see the array of events
and this is after I click the "next" button and "back" on the top left.
Can anybody help me?? below is my code... thanks
Template.home.rendered = function(){
calendar = $('#calendar').fullCalendar({
events: function(start, end, timezone, callback){
var events = [];
calEvents = Times.find();
calEvents.forEach(function(evt) {
events.push({
id: evt._id,
title: evt.title,
start: evt.start,
end: evt.end
});
});
callback(events);
},
editable:false,
duration: '00:30',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
}).data().fullCalendar;
};

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');
},

Full calendar filtering

My view code where full calendar is displayed is below:
<div class="content">
<div id='input'>
<?php echo form_dropdown("package_id", $packagelist, "",'id="packageid"'); ?>
</div>
<div id='calendar'></div>
</div>
<style>
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#packageid').change(function() { //any select change on the dropdown with id country trigger this code
//$('#calendar').fullCalendar ('removeEvents');
var packageid = $('#packageid').val();
alert(packageid);
if(packageid !== null)
{ $('#calendar').fullCalendar({
//var $pid = packageid;
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
displayEventEnd: {
month: true,
basicWeek: true,
"default": true
},
defaultDate: '2014-11-12',
//editable: true,
eventLimit: false, // allow "more" link when too many events
events:
"<?php echo base_url('admin/schedule/scheduledetails/hel/');?>"+"/"+packageid,
});
}
});
});
</script>
When i click the dropdown selection for the first time , then the filtered events is displayed on calendar. But when i click another item on the dropdown menu then no change occurs on the calendar. Now if i refresh the page and select another item from dropdown, then the calendar with filtered events is displayed. Now again if i try to change the dropdown selection, no change occurs on the calendar. What am i doing wrong. I have called the javascript to display the calendar after the onchange function.
EDIT 2: Now I have edited my code to something like this:
<script type="text/javascript">
$(document).ready(function(e) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
displayEventEnd: {
month: true,
basicWeek: true,
"default": true
},
defaultDate: '2015-11-12',
//editable: true,
eventLimit: false, // allow "more" link when too many events
events: "<?php echo base_url('admin/schedule/scheduledetails/json/')?>",
cache : false,
});
});
</script>
this script is for displaying the calendar initially with the overall events.
Now the following script is done for filtering the events:
<script>
$(document).ready(function() {
$('#packageid').change(function() { //any select change on the dropdown with id country trigger this code
$('#calendar').fullCalendar ('removeEvents');
var packageid = $('#packageid').val();
// alert(packageid);
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', '<?php echo base_url();?>admin/schedule/scheduledetails/hel/'+packageid);
//$('#calendar').fullCalendar('removeEvents');
});
});
</script>
The problem that is occuring is that . The calendar is initially loaded with the whole data. And when i click the dropdown button for filtering , the filtering ocurs. If i click the prev or next button on full calendar , then also it works without event being duplicated.
Now if i select the next event from the database, again the filtering occurs perfectly. But when i click the previous or next button , the events of previous dropdown selection plus the present dropdown selection is displayed on the fullcalendar view. Why is it happening? I have used removeEvents . Why isnot it working?

Your calling fullCalendar to create the calendar new each time, you need to destroy it, or just change the source and refresh:
what i do here is add a new source; if you want to change/remove the old source you can do that, just save the event source in a variable to be used in the 'removeEventSource' call before the 'addEventSource' call.
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
displayEventEnd: {
month: true,
basicWeek: true,
"default": true
},
defaultDate: '2014-11-12',
//editable: true,
eventLimit: false, // allow "more" link when too many events
events:
"<?php echo base_url('admin/schedule/scheduledetails/hel/');?>"+"/"+packageid,
});
$('#packageid').change(function() { //any select change on the dropdown with id country trigger this code
var packageid = $('#packageid').val();
alert(packageid);
if( packageid != null ) {
$('#calendar').fullCalendar('addEventSource', '/admin/schedule/scheduledetails/hel/'+packageid);
}
}
});
});
</script>

Here is what I did to implement filtering with FullCalendar. Event is triggered by use of a dropdown. Initial view shows all events. Using dropdown triggers the filters. Filters hold across month, week and day views.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: (new Date()).toISOString().substring(0, 10),
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: 'include/myfeed.php'
});
});
function filterByDealer(dealer){
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource','include/myfeed.php?d='+dealer);
}