I'm using fullCalendar 3.4, I have two custom buttons evening, night as follow :
calendar.fullCalendar({
locale: 'en',
now: calendar.fullCalendar('today'),
editable: false,
customButtons: {
evening: {
text: 'This evening'
},
night: {
text: 'Tonight'
},
tomorrow: {
text: 'Tomorrow',
click: function() {
calendar.fullCalendar( 'gotoDate', moment(new Date()).add(1,'days'));
inputDate.attr("placeholder", calendar.fullCalendar('getDate').format('DD MMMM YYYY'));
}
}
}
});
I managed to display tomorrow's events, but can't figure out how to display evening events, by using a time range for example, same as tommorow but where time is between 12:00 and 16:00 , and for the night where time is between 19:00 and 00:00 .
Thank you in advance!
By using agenda options min and max time. Bit ugly but works.
$(function() {
$('#calendar').fullCalendar({
defaultView: 'agenda',
now: $('#calendar').fullCalendar('today'),
editable: false,
header: {
left: 'prev,next fullday,evening,night',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
customButtons: {
fullday: {
text: 'All Day',
click: function() {
resetDayTime();
}
},
evening: {
text: 'This evening',
click: function() {
resetDayTime();
$('#calendar').fullCalendar('option', 'minTime', '12:00:00');
$('#calendar').fullCalendar('option', 'maxTime', '16:00:00');
}
},
night: {
text: 'Tonight',
click: function() {
resetDayTime();
$('#calendar').fullCalendar('option', 'minTime', '19:00:00');
$('#calendar').fullCalendar('option', 'maxTime', '24:00:00');
}
}
}
});
//Go back to today and reset the available time slots.
//You can remove the gotoDate if you want to show the events for that selected day. Just need to make sure the button text is correct. :)
var resetDayTime = function() {
$('#calendar').fullCalendar('gotoDate', moment(new Date()));
$('#calendar').fullCalendar('option', 'minTime', '00:00:00');
$('#calendar').fullCalendar('option', 'maxTime', '24:00:00');
}
});
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src="//code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js'></script>
<div id='calendar'></div>
Related
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 am using FullCalendar 4 and i have setup the Calendar Object in my script
function createBookingCalendar() {
var calendarEl = document.getElementById('bookingCalendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'en-gb', // the initial locale
timeZone: 'Europe/London',
plugins: ['interaction', 'list', 'timeGrid'],
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,timeGridDay,timeGridWeek, dayGridWeek,DayGridMonth'
},
businessHours: [ // specify an array instead
{
daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
startTime: '09:00', // 9am
endTime: '18:00' // 6pm
}, {
daysOfWeek: [6], // Saturday
startTime: '10:00', // 10am
endTime: '16:00' // 4pm
}
],
hiddenDays: [7],
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: {
buttonText: 'Goto Day View'
},
listWeek: {
buttonText: 'Goto Week View'
},
timeGridDay: {
buttonText: 'Goto Time Grid Day View'
},
timeGridWeek: {
buttonText: 'Goto Time Grid Week View'
}
},
slotDuration: '02:00', // 2 hours
defaultView: 'listWeek',
defaultDate: Date.now(),
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
eventSources: [
// CAD Solutions Event Source (Remote Database)
{
url: '../php/getBookings.php',
method: 'GET',
failure: function () {
$.confirm({
theme: 'Modern',
icon: 'fas fa-exclamation-triangle',
title: 'Error',
content: '<p>There was an error fetching the bookings from our database, we appologise for the inconvenience.</p><p class="text-muted">This error has been logged with our engineers.</p><small>Error 0x86451 (Fetch Bookings Database Error)</small>',
type: 'red',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
}
],
eventRender: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.title,
content: 'asdadasdqweqweqweqweqwasssd',
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
noEventsMessage: '<div class="panel panel-primary" style="height: 245px;width: 654px;margin:0 auto;padding:10px;margin-top:30px;"><div class="panel-heading"><h4><i class="fas fa-info-circle"></i> There are no bookings for this day.</h4></div><div class="panel-body"><p>There are no bookings saved for this date, you can add a booking to this day using the buttons below, or select a different date.</p><p class="text-muted">You can create a booking for this date as all timeslots are available.</small></div><div class="panel-footer"><a class="btn btn-primary" href="javascript:void(0);" id="addBooking" style="color:#fff;"><i class="fas fa-calendar-plus"></i> Create Booking For This Date.</a></div></div><div class="divider"> </div><div class="divider"> </div><div class="divider"> </div>',
eventClick: function (info) {
//Prevent Default Behaviour.
info.jsEvent.preventDefault();
$.confirm({
theme: 'Modern',
icon: 'fas fa-info-circle',
title: 'Selected Booking Information',
content: '<ul class="list-group list-group-flush" id="assetContent"><li class="list-group-item">Booking Company Name: ' + info.event.extendedProps.companyName + '</li><li class="list-group-item">Booking Date: ' + info.event.start + '</li><li class="list-group-item">Booking Slot: ' + info.event.startTime + ' - ' + info.event.endTime + '</li></ul>',
type: 'blue',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
});
calendar.render();
}
When i have eventRender setup in the code the calendar stops fetching events from my source and it shows the eventSources>failure dialog that i added in the function.
When i remove the eventRender part of the script the calendar object renders perfectly and I am able to see all the events from my database.
Could anybody point out where I am going wrong with the coding?
would really like to get the eventRender part working so i can change the background color of events that are set, also in addition, how would i add in events of my own after the source has fetched the events from the server? I want to do this so I can fill in time slots that are missing in the calendar so the user can select a free slot to create a booking.
Many Thanks
Edit I took out the tool tip code I found in the full calendar docs and replaced it with ui tool tip instead, that is now working. What is the procedure for adding in my own events?
I am using full calendar js in my code. I am able to select multiple dates in the calendar but I am not able to unselect the selected dates. Where do I need to changes in my code?
IN HTML FILE
<div class ="main-container fullcalendar-booking-course unselectCancel">
<div id="calendar"></div>
</div>
IN MY JS FILE
<script type="text/javascript">
$(document).ready(function() {
getFullCalendar();
</script>
<script type="text/javascript">
function getFullCalendar(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
endDate = moment(new Date(end)).format("MM-DD-YYYY");
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return ! event.block;
},
editable: true,
eventLimit: true,
events: function(start, end, timezone, callback){
},
eventClick: function(event, jsEvent, view) {
},
loading: function(bool) {
$('#loading').toggle(bool);
},
eventRender: function(event, element){
},
eventAfterAllRender: function (view) {
var quantity = $('.fc-bgevent').length;
$("#quantity").val(quantity);
},
});
}
</script>
NOTE:
I am using fullcalendar js file and CSS file. I have initialized the function in the document ready function. I need to unselect the selected dates. I can select multiple dates but unable to unselect the dates.
I am trying to set the timezone in this example and when time on the calendar is selected, it's clearly still in UTC despite setting the timezone option to 'America/New_York':
$(document).ready(() => {
const fc = $('#c');
const tz = 'America/New_York';
const data = {
meetings: [
{
title: 'Test data',
start: 1513976400000,
end: 1513980000000
}
]
};
const myEvents = [];
for (let d = 0; d < data.meetings.length; d += 1) {
myEvents.push({
title: 'Booked',
start: (moment(data.meetings[d].start).tz(tz)),
end: (moment(data.meetings[d].end).tz(tz)),
});
fc.fullCalendar({
events: myEvents,
timezone: tz,
header: {
left: 'title',
center: 'month,agendaWeek',
right: 'today prev,next',
},
selectable: true,
selectHelper: true,
select(start, end) {
alert(`Book a meeting for ${start.format('h:mma on dddd M/D')}?`);
},
selectOverlap: false,
editable: false,
eventOverlap: false,
});
});
Can anyone confirm that this is a bug or user error?
Change moment default timezone to required timezone (below is the working
example change timezone and observe event on calendar).
$(function () {
var timeZone = 'America/New_York';
var now = moment().add(moment.tz(timeZone).utcOffset(), "m");
moment.tz.setDefault(timeZone);
$('#calendar').fullCalendar({
header: {
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'https://fullcalendar.io/demo-events.json',
defaultView: 'agendaWeek',
timeFormat: 'HH:mm',
editable: true,
});
});
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jakubroztocil.github.io/rrule/lib/rrule.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-3.0.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.js"></script>
<div id="calendar"></div>
Why are my full calendar event does not curl up. If I have more than three events should curl up and show at the bottom of the "more events". FullCalendar downloaded from the repository adesigns / calendar-bundle. I have this:
I need this:
This is my code.I added a piece of code at the end of the function but is not working:
$(document).ready(function () {
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, agendaWeek, agendaDay, add_event'
},
lazyFetching: true,
timeFormat: {
// for agendaWeek and agendaDay
agenda: 'H:mm', // 5:00 - 6:30
// for all other views
'': 'H:mm' // 7p
},
eventSources: [
{
url: Routing.generate('fullcalendar_loader'),
type: 'POST',
// A way to add custom filters to your event listeners
data: {
},
error: function () {
//alert('There was an error while fetching Google Calendar!');
}
}
],
monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
monthNamesShort: ['Sty', 'Luty', 'Marz', 'Kwie', 'Maj', 'Czer', 'Lip', 'Sier', 'Wrze', 'Paź', 'Lis', 'Gru'],
dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
dayNamesShort: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
buttonText: {
month: 'Miesiąc',
week: 'Tydzień',
day: 'Dzień'
},
eventLimit: true,
views: {
agenda: {
eventLimit: 3
}
},
});
});
So, I never heard of the plugin, I googled for the documentations, I opened the documentation and this was the first page I found that resembled your problem: https://fullcalendar.io/docs/display/eventLimit/
You need to add an event limit to your options that limit the amount of events on a day. Like so:
$('#calendar').fullCalendar({
eventLimit: true, // for all non-agenda views
views: {
agenda: {
eventLimit: 6 // adjust to 6 only for agendaWeek/agendaDay
}
}
});
If this does not solve your problem, please post the javascript code you are using. If this did solve your problem, please read the docs of this plugin before asking questions about it here.