Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

FullCalendar Vue Component

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

The component FullCalendar can be used to create a calendar or agenda in your app.

You can add events to it in JavaScript. It supports a variety of views including day, weekly and monthly.

You can display a full-size drag-n-drop event calendar.

FullCalendar Vue Component

In the example below we create a Vue app with a Full Calendar.

vue calendar

Copy and paste the code to try. You should divide the file into several (app.js, style.css).
For demonstration purposes its all in a single file.

<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<link rel='stylesheet' href='//fullcalendar.io/js/fullcalendar-3.6.2/fullcalendar.min.css'>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/en.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/vue/1.0.22/vue.min.js'></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker3.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<style>
.comp-full-calendar {
padding: 20px;
background: #fff;
max-width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="app" class="wrapper">
<div class="comp-full-calendar test-fc">
<calendar :events="events" :editable="true"></calendar>
</div>
</div>
</body>

<script type="text/javascript">
Vue.component('calendar', {
template: '<div></div>',

props: {
events: {
type: Array,
required: true
},

editable: {
type: Boolean,
required: false,
default: false
},

droppable: {
type: Boolean,
required: false,
default: false
},
},

data: function()
{
return {
cal: null
}
},

ready: function()
{
var self = this;
self.cal = $(self.$el);

var args = {
lang: 'de',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: "auto",
allDaySlot: false,
slotEventOverlap: false,
timeFormat: 'HH:mm',

events: self.events,

dayClick: function(date)
{
self.$dispatch('day::clicked', date);
self.cal.fullCalendar('gotoDate', date.start);
self.cal.fullCalendar('changeView', 'agendaDay');
},

eventClick: function(event)
{
self.$dispatch('event::clicked', event);
}
}

if (self.editable)
{
args.editable = true;
args.eventResize = function(event)
{
self.$dispatch('event::resized', event);
}

args.eventDrop = function(event)
{
self.$dispatch('event::dropped', event);
}
}

if (self.droppable)
{
args.droppable = true;
args.eventReceive = function(event)
{
self.$dispatch('event::received', event);
}
}

this.cal.fullCalendar(args);

}

})

new Vue({
el: '#app',

data: {
events: [
{
title: 'Event1',
start: '2017-10-10 12:30:00',
end: '2017-10-13 16:30:00'
},
{
title: 'Event2',
start: '2017-10-07 17:30:00',
end: '2017-10-07 21:30:00'
}
]
},

events: {
'day::clicked': function(date)
{
console.log(date);
}
}
})

</script>
</body>


© vuejsexamples.net - Privacy Policy - Cookie Policy