Displaying an event stored in an array - javascript

<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 to make fullcalendar 2.2.5 dynamic in C#

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();
})

Full Calendar refetchResources not woking in version 5.5.1

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.

Fullcalendar v2 store dragged event into localstorage

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/

Full calender - Remove Events on day click and remove Bg-color of particular cell

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: [
]
});
});

connect to database data in fullcalendar

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

Categories