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