Skip to content

Instantly share code, notes, and snippets.

@jabez007

jabez007/FullCalendarTooltips.html

Created October 26, 2017 22:10
Show Gist options
  • Save jabez007/3bcc2d80426e2e1e3f5f4c8ca5aa0a29 to your computer and use it in GitHub Desktop.
Save jabez007/3bcc2d80426e2e1e3f5f4c8ca5aa0a29 to your computer and use it in GitHub Desktop.
Download ZIP
Rough draft of in idea for an event calendar
Raw
FullCalendarTooltips.html
<html>
<!-- https://fullcalendar.io/ -->
<!-- https://getbootstrap.com/docs/3.3/javascript/#tooltips -->
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.min.css"></link>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.print.css" media="print"></link>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
themeSystem: 'bootstrap3',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: '2017-10-12',
events: [
{
title: 'Foothills of the Spire Event',
start: '2017-10-01'
},
{
title: 'Long Event',
start: '2017-10-07',
end: '2017-10-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-10-09T16:00:00',
end: '2017-10-09T17:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-10-16T16:00:00',
end: '2017-10-09T17:00:00'
},
{
title: 'Conference',
start: '2017-10-11',
end: '2017-10-13'
},
{
title: 'Meeting',
start: '2017-10-12T10:30:00',
end: '2017-10-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-10-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-10-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-10-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-10-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-10-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-10-28'
}
],
eventRender: function(event, element) {
$(element).tooltip({
title: event.title,
placement: 'auto bottom',
viewport: '.fc-body'
});
}
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-size: 14px;
}
#top,
#calendar.fc-unthemed {
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
color: #000;
}
#top .selector {
display: inline-block;
margin-right: 10px;
}
#top select {
font: inherit; /* mock what Boostrap does, don't compete */
}
.left { float: left }
.right { float: right }
.clear { clear: both }
#calendar {
max-width: 900px;
margin: 40px auto;
padding: 0 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/simplex/bootstrap.min.css">
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment