I am a student who is trying to develop a scheduler for a certain project, but I cannot seem to get FullCalendar to work on my page. I tried using the page the guide helps you create, but that did not work, so now I am trying to use one of the demo pages provided in the FullCalendar folder that I downloaded.
I previously used VS 2015, but now switched over to VS 2017 Community but that didn't help either.
My page:
#{
ViewData["Title"] = "Schedule";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<head>
<meta charset='utf-8' />
<link href='~/fullcalendar/fullcalendar.min.css' rel='stylesheet' />
<link href='~/fullcalendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='~/fullcalendar/lib/moment.min.js'></script>
<script src='~/fullcalendar/lib/jquery.min.js'></script>
<script src='~/fullcalendar/fullcalendar.min.js'></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2017-04-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-04-01'
},
{
title: 'Long Event',
start: '2017-04-07',
end: '2017-04-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-16T16:00:00'
},
{
title: 'Conference',
start: '2017-04-11',
end: '2017-04-13'
},
{
title: 'Meeting',
start: '2017-04-12T10:30:00',
end: '2017-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-04-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-04-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-04-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-04-28'
}
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>Calendar</h2>
<div id='calendar'></div>
</body>
Thanks in advance to any helpers!
EDIT (April 26th):
I pressed F12 as suggested and saw that the console logs an error saying "Uncaught TypeError: $(...).fullCalendar is not a function".
I looked at some other posts that mentioned this issue but I could find no second mention of jquery and made sure the order of references was correct, which were the mentioned solutions in those situations.
Is there anything else that can be causing this?
EDIT (April 27th):
All files seem to be loading:
Loaded files in website
It looks like the layout page is calling the jquery file again, see this picture.
Try to remove one of them and make sure the jquery file is being called before the fullcalendar.js
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 am using fullcalendar and my goal is to have a simple pop up on the event click but for some reason I cannot get it to pull in the description in the alert.
Am I missing some JS to include or something? I tried to use the examples from their site but it was not working. I am sure it is something stupid I am missing.
<script src='../assets/calendar/packages/core/main.js'></script>
<script src='../assets/calendar/packages/interaction/main.js'></script>
<script src='../assets/calendar/packages/daygrid/main.js'></script>
<script src='../assets/calendar/packages/timegrid/main.js'></script>
<script src='../assets/calendar/packages/list/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var d = new Date();
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'dayGridMonth',
defaultDate: d,
eventClick: function(info) {
alert('Event: ' + info.description);
},
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events:
[
{
title: 'All Day Event<br>second line',
description: 'description for Long Event',
start: '2020-05-01'
},
{
title: 'Session',
start: '2020-05-12T10:30:00',
description: 'description for Long Event',
end: '2020-05-12T12:30:00'
},
{
title: 'Practical',
start: '2020-05-27T10:30:00',
description: 'description for Long Event',
end: '2020-05-27T12:30:00'
}
]
});
calendar.render();
});
</script>
You need to write
alert('Event: ' + info.event.extendedProps.description);
because
1) the info object isn't the event, the event is a sub-property of that info object - this is described at https://fullcalendar.io/docs/eventClick
and
2) description is a non-standard field as far as fullCalendar is concerned, and all non-standard fields are placed inside the extendedProps sub-property of the event object which fullCalendar generates based on the data you provide it - this is described at https://fullcalendar.io/docs/event-parsing
I'm adding fullcalendar to my website to display a variety of upcoming events. I wish to use a "bootstrap tab box" (tabs to switch between different sections of html) to display the calendar in a normal calendar view and a list view. I have implemented it in the way I think is correct and the calendar view displays perfectly, however the list view doesn't. When the tab is displayed the interface loads, but the month's events aren't displayed until you skip forwards a month then back again. I cannot find any fixes for this and I am completely stumped on why it isn't working. I have tried loads of different methods, but have now exhausted myself of all ideas. Do you know how I can fix this?
<!-- fullCalendar 2.2.5-->
<link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.print.css" media="print">
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="../plugins/fullcalendar/fullcalendar.min.js"></script>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">Calendar View</li>
<li>List View</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<div class="calendar" id="calendarView"></div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="tab_2">
<div class="calendar" id="calendarList"></div>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div>
<script>
function RenderList(){
$('#calendarList').fullCalendar('changeView', 'listMonth');
}
$(document).ready(function() {
$('.calendar').fullCalendar({
//Options for Both Calendars
events: [
{
title: 'My Birthday',
start : '2017-01-05',
end : '2017-01-07'
}
],
});
$('#calendarView').fullCalendar({
//Options for Calendar View
});
//$('#calendar').fullCalendar({
//Options
//firstDay: 1
//});
});
</script>
Update
<script>
$(document).ready(function() {
$('#calendarView').fullCalendar({
//Options for Calendar View
events: [
{
title: 'My Birthday',
start : '2017-01-05',
end : '2017-01-07'
}
],
});
$('#calendarList').fullCalendar({
//Options for Calendar View
defaultView: 'listMonth',
events: [
{
title: 'My Birthday',
start : '2017-01-05',
end : '2017-01-07'
}
],
});
});
</script>
You are overriding the calendar instance defined for .calendar with the one which is defined for #calendarView. You don't have any events in the #calendarView instance. That's why you don't see anything in list view (or may be you have javascript error, because DOM has been changed already - check your console).
You can not extend the calendars in the way you are trying to do. I would suggest to move all common parameters as a constant and provide them to both calendar instances. In addition to initialize calendars for both cases use #calendarView and #calendarList
In addition your version of fullCalendar is 2.2.5. listView is added in 3.0.0 (Reference: https://github.com/fullcalendar/fullcalendar/releases/tag/v3.0.0). So you need to update your callendar version.
fullCalendar has it's own method of switching between views that can be used instead of tabs, as shown below.
<div id="calendar"></div>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listYear'
},
buttonText: {
today: 'Today',
month: 'Calendar View',
listYear: 'List View'
},
defaultView: 'listYear',
defaultDate: '2016-09-12',
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2016-09-01'
},
{
title: 'Long Event',
start: '2016-09-07',
end: '2016-09-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-09-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-09-16T16:00:00'
},
{
title: 'Conference',
start: '2016-09-11',
end: '2016-09-13'
},
{
title: 'Meeting',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-09-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-09-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-09-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-09-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-09-28'
}
]
});
});
</script>
i'm trying to use the jQuery full calendar and i must set events dynamically. these are examples of events:
events: [
{
title: 'Long Event',
start: '2016-09-07',
end: '2016-09-10'
},
{
title: 'Conference',
start: '2016-09-11',
end: '2016-09-13'
},
{
title: 'Meeting',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-09-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-09-12T17:30:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-09-28'
}
]
I have arrays with titles, start dates and end dates of events and i must set them in a loop.
Can someone help me and show me how must do?
Thank's
In this way you can use loop to set events dynamically (In PHP):
events:[
<?php for ($i=0; $i <count($countOfArray); $i++) { ?>
{
title: '<?php echo $countOfArray[$i]['Long_event']; ?>',
start: '2016-09-07',
end: '2016-09-10'
},
<?php } ?>
]
You can also customize date as well:
start: '<?php echo $countOfArray[$i]['YourDate']; ?>',
$(document).ready(function(){
var events = [your-json-array-of-events];
var eventsArray = [];
console.log('e',events);
$.parseJSON(events).forEach(function(element, index){
eventsArray.push({
title:element.title,
description:element.description.substring(0,30),
start:new Date(element.start_date).toISOString(),
end:new Date(element.end_date).toISOString(),
})
})
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: Date.now(),
editable: false,
eventLimit: true, // allow "more" link when too many events
events: eventsArray,
});
});
});
You can go with your events array and pass it as an events property value of the object options that is provided to fullCalendar():
var events = [{title: 'Long Event',start: '2016-09-07',end: '2016-09-10'},{title: 'Conference',start: '2016-09-11',end: '2016-09-13'},{title: 'Meeting',start: '2016-09-12T10:30:00',end: '2016-09-12T12:30:00'},{title: 'Lunch',start: '2016-09-12T12:00:00'},{title: 'Meeting',start:'2016-09-12T14:30:00'},{title: 'Happy Hour',start: '2016-09-12T17:30:00'},{title: 'Click for Google',url: 'http://google.com/',start: '2016-09-28'}];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2016-09-12',
navLinks: true,
editable: true,
eventLimit: true,
events: events
});
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<div id="calendar"></div>
I'm hoping the lack of detail in this question won't result in it being labelled as badly formatted, but I've been playing around with this codepen css/js/jquery calendar/schedule script and I can't seem to find out how to add, say, reminders on specific dates. I have a database of things I need to do and the date by which they must be completed, I can access each date element (d/m/y) individually and was wondering how to actually implement my database into this calendar.
This is the html
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<!-- CSS -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet" />
<link href="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet" />
<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.print.css" rel="stylesheet" />
<!-- SCRIPTS -->
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script class="cssdesk" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js" type="text/javascript"></script>
<script class="cssdesk" src="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<h1>Date</h1>
<div id='calendar'></div>
</div>
</body>
</html>
And nowhere in the code does it indicate a div where I can add events, I hope some one can help.
Thank you in advance.
You should check the calendar plugin documentation at http://fullcalendar.io
to include dates modify the javascript .. this snippet taken from the example on the homepage.
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-02-01'
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-16T16:00:00'
},
{
title: 'Conference',
start: '2015-02-11',
end: '2015-02-13'
},
{
title: 'Meeting',
start: '2015-02-12T10:30:00',
end: '2015-02-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-02-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-02-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-02-28'
}
]
});
});