how to make fullcalendar 2.2.5 dynamic in C# - javascript

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

Related

Displaying an event stored in an array

<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.

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.

Add events in FullCalendar on click

I am trying to add events on calendar cell click in .NET like this:
http://arshaw.com/js/fullcalendar-1.5.3/demos/selectable.html
I took the help of this post:
create event with fullcalendar when clicking on calendar (rails)
I am getting the Selected date and text on Alert , bit not able to post it on selected cell ..
I have tried same solution on jsfiddle:
http://jsfiddle.net/5o66w860/
My code:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var events_array = [
{
title: 'Test1',
start: new Date(2012, 8, 20),
tip: 'Personal tip 1'},
{
title: 'Test2',
start: new Date(2012, 8, 21),
tip: 'Personal tip 2'}
];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
events: events_array,
eventRender: function(event, element) {
element.attr('title', event.tip);
},
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"
);
/**
* ajax call to store event in DB
*/
jQuery.post(
"event/new" // your url
, { // re-use event's data
title: title,
start: start,
end: end,
allDay: allDay
}
);
}
calendar.fullCalendar('unselect');
}
});
});
I also to remove , events array . .. but still not working
Ok , got It after some googling :
Just need to change Code on select
select: function (start, end, jsEvent, view) {
var abc = prompt('Enter Title');
var allDay = !start.hasTime && !end.hasTime;
var newEvent = new Object();
newEvent.title = abc;
newEvent.start = moment(start).format();
newEvent.allDay = false;
$('#calendar').fullCalendar('renderEvent', newEvent);
}

Fullcalendar: How can get selected start and selected end datetime on fullcalendar through calendar object?

I have gone through other post of fullcalendar but i couldn't fine what i need.
In "Select" callback event under fullcalendar, i could get start,end datetime values which are selected by user. I want this values through calendar object as i need to use this in other function.
http://arshaw.com/fullcalendar/docs/selection/select_callback/
Can any one please share me , how to get start/end value through calendar object ?
$(document).ready(function () {
// 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'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:'+start+' '+end);
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
//$('.fc-day-content').html('<div style="position: relative; height: 0px;">xxx</div>');
}
calendar.fullCalendar('unselect');
},
editable: true,
});
// Calendar end
});
SEE "start" and "end" in prompt

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