I want to initially set the editable, selectable, droppable and events to false (or not), when the user clicks a button, retrieves the data successfully, then set them to true. I'm a newbie and I don't know how to handle it with js
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
height: function () {
return $(window).height() * 0.7;
},
allDaySlot: false,
defaultView: 'agendaWeek',
//Here is the part I want to add after receiving user submitted data
editable: true,
selectable: true,
droppable: true,
events: "...",
Related
Hi I'm using FullCalendar
With bootstrap 5 and Stimulus JS
connect() {
this.calendar = new Calendar(this.calendarTarget, {
plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, bootstrap5Plugin],
themeSystem: 'bootstrap5',
height: 650,
width: 650,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
initialDate: '2018-01-12',
events: [
{
start: '2018-01-10T10:00:00',
end: '2018-01-12T16:00:00',
display: 'background'
},
]
});
this.calendar.render();
}
I added calendar div to modal form
After my modal opened I faced with this:
image
After I was resizing my browser calendar looked well.
myModal.addEventListener('shown.bs.modal', function() {
controller.calendar.render();
});
This helped resolve the issue. But the calendar appears only after opening the modal. What causes changes in height and looks so-so.
I have the following code...
$(document).ready(function() {
// page is now ready, initialize the calendar...
var calendar = $('#fullCalendar').fullCalendar({
// put your options and callbacks here
// height: 600,
// aspectRatio: 2,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events: <?php echo $myjson ?>,
This loads all of the events, not just the ones needed for the monthly view. I cannot figure out how to set the start and end params to limit the event loading. I would greatly appreciate some insight on this.
Using FullCalendar I am able to display 2 calendars on the same page. Calendar1 has all the controls to switch views from Day, Week, Month, Year plus the arrows to go forward/backwards. Calendar2 is a listMonth with no controls showing. It works fine on load but I would like it to change when Calendar1 changes from month to month or year to year.
Is this possible? I haven't found anything that would allow me to change the listMonth when the month/year changes on Calendar1.
jQuery(document).ready(function () {
$('#calendar1').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listYear'
},
views: {
listYear: { buttonText: 'Year'}
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
$('#calendar2').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
views: {
listMonth: { buttonText: 'Month' }
},
defaultView: 'listMonth',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
});
I had a need to implement this recently to sync a grid and list view. I came across this question, but the suggested comments no longer appear valid. Here is a simple solution I used.
This is the simple html container for both calendars.
<div>
<div id="calendarGrid"></div>
<div id="calendarList"></div>
</div>
Below is the javascript code to hook into the "datesSet" method that triggers as the user navigates through the calendar and sets the date for the "other" calendar to keep it in sync, including a date comparison to prevent an infinite loop.
var calendarElGrid = document.getElementById('calendarGrid');
var calendarElList = document.getElementById('calendarList');
var calendarGrid = new FullCalendar.Calendar(calendarElGrid, {
initialView: 'dayGridMonth',
datesSet: function (info) {
syncCalendar(calendarList, info.start);
}
});
calendarGrid.render();
var calendarList = new FullCalendar.Calendar(calendarElList, {
initialView: 'listMonth',
datesSet: function (info) {
syncCalendar(calendarGrid, info.start);
}
});
calendarList.render();
function syncCalendar(otherCalendar, startDate) {
if (otherCalendar.getDate().toDateString() != startDate.toDateString()) {
otherCalendar.gotoDate(startDate);
}
}
Solution is based off of v6.0.2 documentation here:
https://fullcalendar.io/docs/datesSet
I am working on a project where users create appointments using fullcalendar. Users can only create appointments on those timeslots(30min) that are available. These events are coming from a file named as events_json.php. i am including this file in like this
$(document).ready(function() {
$myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
theme: true,
selectable: true,
selectHelper: true,
height: 500,
events: 'JSON/events_json.php',
select: function(start, end, allDay) {
//$('#eventStart').datepicker("setDate", new Date(start));
/*$('#eventStart').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(start));
$('#eventEnd').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(end));*/
$('#calEventDialog').dialog('open');
},
editable: false
});
Now the events are showing but i don't want to show the user that, user should only see the time-slots as disabled and the free time-slots as links with title as "Book".
I found the renderEvent in documentation but couldn't get around it.
EDIT 1
The events_json.php is sending events like this
The file is sending events like this,
$output_arrays = array(array("title"=>"Happy Hour", "start"=>"2016-01-13T07:00:00-05:00"),
array("title"=>"Click for Google", "start"=> "2016-09-02")
);
echo json_encode($output_arrays);
In order to show existing events as "taken", you can handle the eventDataTransform event.
$(document).ready(function() {
$myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
theme: true,
selectable: true,
selectHelper: true,
height: 500,
events: 'JSON/events_json.php',
eventDataTransform: function(event) //this is called once for each event returned in the JSON
{
event.title = "Taken";
return event;
},
select: function(start, end, allDay) {
//$('#eventStart').datepicker("setDate", new Date(start));
/*$('#eventStart').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(start));
$('#eventEnd').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(end));*/
$('#calEventDialog').dialog('open');
},
editable: false
});
N.B. the "eventRender" you mention isn't an event, it's a method you can call to add new events to the calendar on the client-side. That's probably why it didn't help you in this situation. It might be more helpful when you want users to book into a slot - handle the "select" event (as you're doing already) and then use renderEvent to create a new appointment on the calendar. You can control the duration and all other properties of the event that gets added.
i have a calendar working with the following code:
$( document).ready( function(){
$('#calendar').fullCalendar( {
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay' },
editable: true,
slotDuration: '00:15:00',
defaultView: 'agendaWeek',
eventLimit: true,
events: source
}
)}
Following this flddle, i tried to set the slotDuration to 15 min, but it's not working. It just uses the default 30 min.
The only hint i get is this error when i open the calendar on Chrome:
Failed to get text for stylesheet 37: No style sheet with given id found
Any idea of which might be the problem?