I don't know how to add events in fullcalendar scheduler.js, can anyone help me?
I can add events with fullcalendar but without scheduler.js that works.
When I add this code to my script the event won't add
select: function(start, end)
{
this.title = prompt('Event Title:');
this.eventData;
if (this.title) {
this.eventData = {
title: this.title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', this.eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
You need to load resource and specify your resource ID in your event as well. So if you put these it will work out. Try this code.
select: function(start, end)
{
this.title = prompt('Event Title:');
this.eventData;
if (this.title) {
this.eventData = {
title: this.title,
start: start,
end: end,
resourceId:['ResourceID1'] // Example of resource ID
};
$('#calendar').fullCalendar('getResources')// This loads the resources your events are associated with(you have toload your resources as well )
$('#calendar').fullCalendar('renderEvent', this.eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
Resource example is as follows:
$('#calendar').fullCalendar({
header: {left: 'prev,next today', center: 'title', right: ''},
selectable: true,
allDayDefault: false,
unselectAuto: false,
editable: false,
slotLabelFormat:"HH:mm",
resources: [[id:'ResourceID1', title:"Just a title"],[id:'ResourceID2', title:"Just a title part II"]]
})
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 like the fullcalendar JQuery-Plugin. My calendar doesn't work. At the moment i am looking for a solution to add an event but i can't... Why ?
This is my code:
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2017-05-11',
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end, allDay) {
var title = prompt("Event here: ", "New Event:");
if (title != null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$calendar.fullCalendar("unselect");
},
events: [
{
title: 'All Day Event',
start: '2017-05-01'
}
]
});
});
You need to define variable calendar like below
var calendar = $('#calendar').fullCalendar({
Then it will work.
i´ve got another question to fullcalendar.
I´want to allow the stuff to save events only to a fix month. The other months should be readonly. Is there a way to realize this?
This is my code:
$j('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2017-05-12',
selectable: true,
selectOverlap: false,
weekends: false,
eventOverlap: false,
select: function(start, end) {
var title = prompt('Kostenstelle:');
var eventData;
id = Date.now();
if (title) {
eventData = {
id: id,
title: title,
start: start,
end: end
};
$j('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
saveDay({'id': id,'title': title, 'start': start, 'end': end});
$j('#calendar').fullCalendar('unselect');
},
eventResize: function (event, dayDelta, minuteDelta) {
saveRange(event);
},
eventDrop: function (event, delta, revertFunc, jsEvent, ui, view ){
saveDrop(event, view);
},
eventReceive: function (event, dayDelta, minuteDelta){
saveDay(event);
},
eventRender: function(event, element) {
if(event.className != 'disableDelete'){ element.append( "<span class='closeon'>x</span>" );}
element.find(".closeon").click(function() {
$j('#calendar').fullCalendar('removeEvents',event._id);
deleteDay(event);
});
},
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($j('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$j(this).remove();
}
},
editable: true
});
The user should be able to view the other months but not be able to set events on it. So i want to set the other days readonly. Is it possible?
Thanks!
You can do this as follows
var monthStartDate = new Date('1/1/2017');
var monthEndDate = new Date('1/31/2017');
// monthStartDate and monthEndDate is month range in which you want to save event
select: function(start, end) {
if(start >= monthStartDate && start <= monthEndDate && end >= monthStartDate && end <= monthEndDate) {
var title = prompt('Kostenstelle:');
var eventData;
id = Date.now();
if (title) {
eventData = {
id: id,
title: title,
start: start,
end: end
};
$j('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
saveDay({'id': id,'title': title, 'start': start, 'end': end});
$j('#calendar').fullCalendar('unselect');
}
},
This will not allow to save events between monthStartDate and monthEndDate.
I have fullcalendar with some JSON data. It shows up as "12a Medical Day Jackson Post". Otherwise the display is fine. When I change the dates to be "start":"12/2/2015" to this 2015-2-12. The 12a appen disappears.
The Code for fullcalendar used is this
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
defaultDate: '2015-03-11',
defaultView: 'month',
selectable: false,
selectHelper: false,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
eventMouseover: function(event, jsEvent, view) {
if (view.name !== 'agendaDay') {
$(jsEvent.target).attr('title', event.title);
}
},
events:[
{
"title":"Medical Day Jackson Post",
"start":"12/2/2015",
"end":"12/3/2015",
"description":"Jackson"
},
By default it shows the time unless the event is an allDay event. If allDay isn't specified, it guesses and in your case, it guessed differently depending on the date format.
So, either make allDay explicit in you events, or stop the time from displaying on all events with timeFormat: "", as one of you fullCalendar options.
I want to make two selections in the calendar. Right now I can only make one that goes to one of my inputs.
I am trying to select a date on the calendar, then that first selection goes to my first input tag.
Then after that I want to select a different date that goes to my second input tag.
So basically, I want to make two selections. Here is my code. Do I need to make a callback somewhere here? I put my code on jsfiddle.
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = 'true';
if (title === 'true') {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
var eventStart = $.fullCalendar.formatDate(start, "MM/dd/yyyy");
var eventEnd = $.fullCalendar.formatDate(end, "MM/dd/yyyy");
$('input[name="startDate"]').val(eventStart);
}
calendar.fullCalendar('unselect');
},
eventClick: function(calEvent, jsEvent, view) {
$('#calendar').fullCalendar('removeEvents', calEvent._id);
$('input[name="startDate"]').removeAttr('value');
$('input[name="endDate"]').removeAttr('value');
},
editable: true
});
Unless I'm not understanding your question, how about doing this?
if($('input[name="startDate"]').val()=='') {
$('input[name="startDate"]').val(eventStart);
} else {
$('input[name="endDate"]').val(eventEnd);
}
JSFIDDLE