bootstrap-year-calendar
bootstrap-year-calendar copied to clipboard
Published
20 hours ago •
Paul-DS
Paul-DS
Can anybody show the usage of calendar for beginners?
I tried the put calendar on empty html page or view but I could not figure out. Can anybody show usage of calendar on html or view page and also any changes on css or js? Sorry for my illiterate question, I am not zero about web applications, trying to improve myself.
Hi,
- Create a basic template of a HTML pagein which you'll include JQuery the Css and Js file given on this repo, something like this:
<!DOCTYPE html>
<html>
<head>
<script src="/Scripts/jquery-2.2.3.min.js"></script> <!--path where you have JQuery-->
<!--path of he Css and Js file given on this repo-->
<link href="../Plugins/YearCalendar/bootstrap-year-calendar.min.css" rel="stylesheet" />
<script src="../Plugins/YearCalendar/bootstrap-year-calendar.js"></script>
</head>
<body>
<div id="calendar"></div>
<script type="text/javascript">
//This is what make the calendar show and work
$('#calendar').calendar({
//This is to show it if it has events
mouseOnDay: function(e) {
if(e.events.length > 0) {
var content = '';
for(var i in e.events) {
content += '<div class="event-tooltip-content">'
+ '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
+ '<div class="event-location">' + e.events[i].location + '</div>'
+ '</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html:true,
content: content
});
$(e.element).popover('show');
}
},
//This is to hide the popover
mouseOutDay: function(e) {
if(e.events.length > 0) {
$(e.element).popover('hide');
}
},
//This dataSource is just a sample data
dataSource: [
{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29)
},
{
id: 1,
name: 'Microsoft Convergence',
location: 'New Orleans, LA',
startDate: new Date(currentYear, 2, 16),
endDate: new Date(currentYear, 2, 19)
},
{
id: 2,
name: 'Microsoft Build Developer Conference',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 3, 29),
endDate: new Date(currentYear, 4, 1)
},
{
id: 3,
name: 'Apple Special Event',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 1),
endDate: new Date(currentYear, 8, 1)
},
{
id: 4,
name: 'Apple Keynote',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 9),
endDate: new Date(currentYear, 8, 9)
},
{
id: 5,
name: 'Chrome Developer Summit',
location: 'Mountain View, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 18)
},
{
id: 6,
name: 'F8 2015',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 2, 25),
endDate: new Date(currentYear, 2, 26)
},
{
id: 7,
name: 'Yahoo Mobile Developer Conference',
location: 'New York',
startDate: new Date(currentYear, 7, 25),
endDate: new Date(currentYear, 7, 26)
},
{
id: 8,
name: 'Android Developer Conference',
location: 'Santa Clara, CA',
startDate: new Date(currentYear, 11, 1),
endDate: new Date(currentYear, 11, 4)
},
{
id: 9,
name: 'LA Tech Summit',
location: 'Los Angeles, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 17)
}
]
});
</script>
</body>
</html>
- Enjoy and see if any error appears, if anything more just ask
@William-H-M i cope your code，and run wrong。
Uncaught ReferenceError: currentYear is not defined
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery.min.js"></script> <!--path where you have JQuery-->
<!--path of he Css and Js file given on this repo-->
<link href="./css/bootstrap-year-calendar.min.css" rel="stylesheet" />
<script src="./js/bootstrap-year-calendar.js"></script>
</head>
<body>
<div id="calendar"></div>
<script type="text/javascript">
//This is what make the calendar show and work
$('#calendar').calendar({
//This is to show it if it has events
mouseOnDay: function(e) {
if(e.events.length > 0) {
var content = '';
for(var i in e.events) {
content += '<div class="event-tooltip-content">'
+ '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
+ '<div class="event-location">' + e.events[i].location + '</div>'
+ '</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html:true,
content: content
});
$(e.element).popover('show');
}
},
//This is to hide the popover
mouseOutDay: function(e) {
if(e.events.length > 0) {
$(e.element).popover('hide');
}
},
//This dataSource is just a sample data
dataSource: [
{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29)
},
{
id: 1,
name: 'Microsoft Convergence',
location: 'New Orleans, LA',
startDate: new Date(currentYear, 2, 16),
endDate: new Date(currentYear, 2, 19)
},
{
id: 2,
name: 'Microsoft Build Developer Conference',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 3, 29),
endDate: new Date(currentYear, 4, 1)
},
{
id: 3,
name: 'Apple Special Event',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 1),
endDate: new Date(currentYear, 8, 1)
},
{
id: 4,
name: 'Apple Keynote',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 9),
endDate: new Date(currentYear, 8, 9)
},
{
id: 5,
name: 'Chrome Developer Summit',
location: 'Mountain View, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 18)
},
{
id: 6,
name: 'F8 2015',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 2, 25),
endDate: new Date(currentYear, 2, 26)
},
{
id: 7,
name: 'Yahoo Mobile Developer Conference',
location: 'New York',
startDate: new Date(currentYear, 7, 25),
endDate: new Date(currentYear, 7, 26)
},
{
id: 8,
name: 'Android Developer Conference',
location: 'Santa Clara, CA',
startDate: new Date(currentYear, 11, 1),
endDate: new Date(currentYear, 11, 4)
},
{
id: 9,
name: 'LA Tech Summit',
location: 'Los Angeles, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 17)
}
]
});
</script>
</body>
</html>
@Linbubin Ohhh sorry, sorry I removed the var currentYear just before start the whole JS set this
var currentYear = new Date().getFullYear()