<script>
$(document).ready(function () {
var selectedEvent = null;
let eventsArr = loadData();
let calendar = initCalendar();
$('#btnEdit').click(function () {
$('#viewEvent').modal('hide');
});
$('#btnDelete').click(function () {
});
function loadData() {
let eventsArr = [];
let eventTable = document.getElementById("eventTable");
let trElem = eventTable.getElementsByTagName("tr");
for (let tr of trElem) {
let tdElems = tr.getElementsByTagName("td");
let eventObj = {
id: tdElems[0].innerText,
title: tdElems[1].innerText,
start: tdElems[2].innerText,
end: tdElems[3].innerText,
description: tdElems[4].innerText
}
eventsArr.push(eventObj);
}
return eventsArr;
}
function initCalendar() {
var calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
eventColor: '#378006',
events: eventsArr,
eventDisplay: true
});
calendar.render();
return calendar;
}
});
</script>
I need help displaying these events to the fullcalendar. The events come from me entering them in a form and then they will be displayed in the calendar.
Right now the events only display in the top of the calendar but not on the calendar.
Related
How can I create a dynamic full calendar in asp.net. version of fullcalendar is 2.2.5
I am not able to find any code for this version of fullcalendar and in earlier version this code doesn't work
Javascript
$(function () {
var str;
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
var eventObject = {
title: $.trim($(this).text())
}
})
}
ini_events($('#external-events div.external-event'))
//Date for the calendar events (dummy data)
var date = new Date()
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
// initialize the external events
// -----------------------------------------------------------------
var calendar = new Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: ''
},
themeSystem: 'bootstrap',
//Random default events
events: [
{
title: "Weekend",
daysOfWeek: [0, 6],
backgroundColor: '#297109', //red
borderColor: '#297109', //red
allDay: true
}
]
});
calendar.render();
})
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'resourceTimelineDay',
refetchResourcesOnNavigate: true,
customButtons: {
myCustomButton: {
text: 'Filter',
click: function() {}
}
},
viewClassNames: function(info) {
calendarEl.querySelectorAll('.fc-button').forEach((button) => {
if (button.innerText === 'Filter') {
button.classList.add('custom-btn')
}
});
},
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
//themeSystem: 'bootstrap',
aspectRatio: 1.5,
headerToolbar: {
right: 'myCustomButton,prev,today,next',
center: 'title',
left: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineYear'
},
editable: true,
resourceAreaHeaderContent: 'Vehicles',
resources: <?= globalfunctions::vehicles_reources(); ?>,
});
calendar.render();
$("#group").change(function() {
var value = $(this).val();
if (value == '1') {
resources = <?= globalfunctions::vehicles_reources(); ?>;
} else {
resources = <?= globalfunctions::operator_resources(); ?>;
}
calendar.refetchResources();
});
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
calendar.gotoDate(d)
}
});
});
On chaning dropdown needed to fetch different resources. Calendar resources are not refetched after event change. Please provide example to refetch the event on change of dorpdown. I am using fullcalendar 5.5.1.
How can I store my dragged events into localstorage ? I have figured out in old fullcalendar version but this solution is not working any more.
var EventsView = Backbone.View.extend({
el: document.getElementById("content"),
render: function() {
var self = this;
var events = JSON.parse(localStorage.getItem('events'));
var events = new Events(events);
var jsevents = events.toJSON();
this.el.innerHTML = _.template( calendarTemplate,{data : jsevents} );
$('#calendar').fullCalendar({
agenda: 'h:mm{ - h:mm}',
'': 'h(:mm)t',
aspectRatio: 1.5,
droppable: true,
weekend: true,
editable: true,
eventDrop: function(event) {
// ???????????????????????????????
},
defaultView: 'month',
firstDay: 1,
handleWindowResize: true,
allDayDefault: false,
firstHour: 7,
columnFormat: {
month: 'dddd',
week: 'ddd, dS',
day: 'dddd, MMM dS'
},
header: {
right: 'prev,next',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
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);
events.push(eventData);
localStorage.setItem('events',JSON.stringify(events));
}
$('#calendar').fullCalendar('unselect');
},
events: function(start, end, timezone, callback) {
callback(jsevents);
}
});
},
You can see my select function fully working. I mean selected events are stored into database.
i was able to replicate your example, and it worked just fine, the only thing i added is the definition of Events, i made it as backbone collection
var Events = Backbone.Collection.extend({});
I think you need to debug while setting the value in local storage, try to log the value of
JSON.stringify(events)
just before setting in local storage
EDIT:
jsfiddle: http://jsfiddle.net/mfarouk/vcsr45q8/25/
I need to limit the events to one in a particular date, and on click of date if any events are present, it has to be removed.
While adding an event to a date, the color of the cell should be turned orange, and while deleting the event, it has to be turned back to white.
$(function () {
// Full calendar
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',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
backgroundColor: 'orange',
allDay: allDay,
},
true
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(event){
var r=confirm(\"Are you sure?\");
if (r==true)
{
$('#calendar').fullCalendar('removeEvents',event._id);
}
},
dayClick: function(date, allDay, jsEvent, view) {
if($( this ).hasClass('bg-orange')){
$(this).removeClass('bg-orange');
}
else
{
$(this).addClass('bg-orange');
}
},
editable: true,
events: [
]
});
});
I've see the calendar code on arshaw/fullcalendar. And I've changed a little code, but I still don't know how to connect javascript into database..
Here's the original code
$(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',center: 'title',right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
});
});
And this I changed a bit
$(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',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
newwindow=window.open('2.php','name','height=400,width=300');
if (window.focus) {newwindow.focus()}
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
});
});
Where can I put the connection script ?
Need advise..
Thanks,
You cannot establish a connection directly from javascript to use in full calendar
You have to do this
Create a Servlet/Action Class/ C# Class (whatever we based Controller class);
Connect to database from the Controller
Write the response data as a JSON String
IN the full calendar, add this attribute
events: "servletURL",
When the calendar loads, the events attribute will call the servletURL, using ajax and retrieve the response text to display it in the Calendar