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>
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'm using full calendar 3.4 and trying to show day names in the month view, but nothing seems to work.
Works fine in Week view though.
Tried multiple different things and here is my configuration:
$('#calendar').fullCalendar({
defaultView: 'month',
weekNumbers: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
timeFormat: 'H:mm',
firstDay: 1,
views: {
month: {
columnHeaderFormat: 'ddd'
}},
header: {
right: 'prev,next today',
left: 'title',
center: 'month,agendaWeek,agendaDay'
} });
Any ideas how I can make it to work?
What momnet version you are using ? Try this code snippet. I can see day names in the header.
(function($) {
$(document).ready(function() {
var fullcalendar = $('#calendar').fullCalendar({
defaultView: 'month',
weekNumbers: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
timeFormat: 'H:mm',
firstDay: 1,
views: {
month: {
columnHeaderFormat: 'ddd'
}
},
header: {
right: 'prev,next today',
left: 'title',
center: 'month,agendaWeek,agendaDay'
}
});
});
})(jQuery)
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<div id="calendar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
columnFormat: {
month: 'dddd'
}
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'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>
I am building a event calendar within Hero Framework. I have got my fullcalendar linked to DB via JSON method. The record is showing start at "2012-04-18 12:00" and end at "2012-04-18 14:00" but calendar failed to show the event base on the time. It is shown as ALL-DAY event. Any idea how to solve that?
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
allDaySlot: false,
firstHour: 9,
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
},
false // make the event "stick"
);
var startDateString = $.fullCalendar.formatDate(start, 'yyyy-MM-dd hh:mm');
var endDateString = $.fullCalendar.formatDate(end, 'yyyy-MM-dd hh:mm');
$.ajax({
type: 'POST',
url: '{url}ajaxpost/add',
data: {
startDate: startDateString,
endDate: endDateString,
eventTitle: title
},
dateType: 'json',
success: function (resp) {
calendar.fullCalendar('refetchEvents');
}
});
}
calendar.fullCalendar('unselect');
},
editable: true,
events: "{url}ajaxget/data",
});
});
you need to set the event allDay property to false
When you return the events from your {url}ajaxget/data url, you need to specify that the event is not all day.
You do this my setting an allDay field on each event that is not all day long.
It may look like this:
[{
start : 10000000,
end : 10000500,
title : 'example event'
allDay : false
}, ... ]
You can also find this info in the documentation.