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'
}
]
});
});
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 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
I have been able to successfully implement fullcalendar with the BC news module but when the event has passed, it disappears from the calendar completely. I need all events, past and present to stay on the calendar but when I replace the event module with the news module or a webapp, my page just goes blank. Anyone have experience with this? The code below is for the working event module, if I change:
{module_booking filter="all" collection="theEvents" template=""}
to:
{module_announcement filter="all" collection="theEvents" template=""}
I get the blank page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="/css/fullcalendar.min.css" rel="stylesheet" />
<link href="/css/fullcalendar.print.min.css" rel="stylesheet" media="print" />
<link href="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css" rel="stylesheet" />
<script src="/js/moment.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/fullcalendar.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var tooltip = $('<div/>').qtip({
id: 'calendar',
prerender: true,
content: {
text: ' ',
title: {
button: true
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'mouse',
viewport: $('#calendar'),
adjust: {
mouse: false,
scroll: false
}
},
show: false,
hide: false,
style: 'qtip-light'
}).qtip('api');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'month',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
eventMouseover: function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
},
dayClick: function() { tooltip.hide() },
eventResizeStart: function() { tooltip.hide() },
eventDragStart: function() { tooltip.hide() },
viewDisplay: function() { tooltip.hide() },
events: [
{module_booking filter="all" collection="theEvents" template=""}
{% for item in theEvents.items -%}
{
title: '{{ item.name }}',
url: '{{ item.url }}',
start: '{{ item.date | date: "yyyy-MM-dd" }}'
},
{% endfor -%}
]
});
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
In the case of bookings, you're probably better to use a liquid layout with {module_data} since the regular tags won't render past events.
{module_data resource="bookings" version="v3" fields="name,body,date,capacity,hideWhenFull,disabled,deleted,requiresPayment,createDate,lastUpdateDate" skip="0" limit="10" order="id" collection="myData"}
See the {module_data} documentation
and you may also want to install the BC api discover app from here
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>