vue calendar fullCalendar. no jquery required. Schedule events management

Overview

##vue-fullcalendar

npm npm

Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only supports month view. It's inspired by fullCalendar.io but not cloned by it. So please read the docs here below to understand all features.

Simple Live Demo

demo.gif

install

By NPM

@latest works for Vue2 0.1.11 works for Vue1.*

// for Vue2
npm install [email protected] --save 

// for Vue1
npm install [email protected] --save 

or download code and include it

<script src='dist/vue-fulcalendar.min.js'>

Usage

Register component globally

// Your entry index.js
import Vue from 'vue'
import App from './App'

import fullCalendar from 'vue-fullcalendar'

Vue.component('full-calendar', fullCalendar)

// Vue2
new Vue({
  el : '#app',
  render: h => h(App),
  template : '<App/>',
  components : {
    App
  }
})

//Vue1

new Vue({
	el : 'body',
	components : {
		App
	}
})

or register locally in your .vue file

Example

<full-calendar :events="fcEvents" locale="en"></full-calendar>
var demoEvents = [
	{
      title : 'Sunny Out of Office',
      start : '2016-08-25',
      end : '2017-07-27'
    }
]
export default {
  data () {
	return {
	  fcEvents : demoEvents
	}
  },
  components : {
	'full-calendar': require('vue-fullcalendar')	
  }
}

A sample screenshot is here, Yeah you see the calendar

Docs

props

  1. events : Events will be displayed on the calendar

    events = [
      {
        title     :  'event1',
        start     : '2016-07-01'
        cssClass  : 'family',
        YOUR_DATA : {}
      },
      {
        title     : 'event2',
        start     : '2016-07-02',
        end       : '2016-07-03',
        cssClass  : ['family', 'career']
        YOUR_DATA : {}
      }
    ]         
    • title is the title of this event, will be displayed on calendar

    • start is the start day of this event

    • end is the end day of this event

    • cssClass is css class of each event label, such that, you will be able to set different colors, style ..

    • YOUR_DATA You can define as many data you want as possible

  2. locale : langague of things like monthNames weekNames and titleFormat. Support same locales than moment.js

    • default : en
  3. firstDay : first day of the week, Number, default: 0 (Sunday) Sunday=0, Monday=1, Tuesday=2, etc. Any number smaller than 0 or larger than 6 will be set to 0.

    • default : 0

events

fc will dispatch some events out.

  1. changeMonth : Every time you click arrow to next/last month, fc will dispatch changeMonth

    this.$dispatch('changeMonth', start, end, current)
    • start is the first day of current monthView (moment object)

    • end is the last day of current monthView (moment object)

    • current is the first day of current month (moment object)

  2. eventClick : Every time you click a event, fc will dispatch eventClick

    this.$dispatch('eventClick', event, jsEvent, pos)
    • event is an Event object hold the event's information

    • jsEvent holds the native javascript event

    • pos is the relative coordinates of fc

  3. dayClick : fc dispatch it when you click a day slot.

    this.$dispatch('eventClick', day, jsEvent)
    • date is a Date Object of the day you click (moment object)

    • jsEvent holds the native javascript event

  4. moreClick : fc dispatch it when you click a more button

    • date is the date corresponding to the "more" clicked (moment object)

    • events is the list of events that will be in the box

    • jsEvent holds the native javascript event

slots

You will be able to register your own stuff by using slots

  1. fc-header-left : top left area

  2. fc-header-right : top right area. In my case, I added a filter menu there

  3. fc-body-card : inside the body area, usually working with EventClick, to display a event detail

###END

Comments
  • Locale

    Locale

    How to change locale? I've been trying - fr, zh, ru but all in vein... Locale always stays default - 'en'

    <full-calendar :events="events"
                         locale="ru"
                         firstDay="1"
                         @eventClick="eventClick">
          </full-calendar>
    
    opened by SergeyMiracle 9
  • Absolute positioning of events breaking event emit

    Absolute positioning of events breaking event emit

    I have removed the "sort by duration" method so I can apply absolute positioning to events using the cssClass. The reason for this is that I have a set number of users (U1-U6) and I want their events to always show in a specific order and in a specific location within the day card. However, this has broken the eventClick in certain places. For example, when U1 has an event spanning all week, I can't click the last two days of the event to launch the body-card. This glitch seems to be connected to the 3-day event for U3. See the attached image.

    screen-shot-2017-05-25-at-14 38 58

    If I change U3's event from the 15th to the 19th to match U1, then all the cell are clickable for U1 again. Really strange.

    When I look at the components in the Vue plugin for Chrome, I see that the event on the 18th is duplicated for U1, one with the correct classes and one incorrect :

    duplicate components

    Here's an example of the styles I applied:

    .U1 { position: absolute; top: 0; right: 0; left: 0; background-color: #ccff66; } .U2 { position: absolute; top: 20px; right: 0; left: 0; background-color: #ccccfc; } .U3 { position: absolute; top: 40px; right: 0; left: 0; background-color: #ffabc7; }

    Is there a way to resolve this? Perhaps a better way to position the event-items without using position: absolute? Any help would be appreciated!

    opened by volfie-dot-tech 8
  • Adding class to event

    Adding class to event

    Hey, I am trying to create a series of different events (with different colours) and I'd love to be able to set something like this:

    events = [
      {
        title     :  'event1',
        start     : '2016-07-01',
        class     : 'birthday'
        YOUR_DATA : {}
      },
      {
        title     : 'event2',
        start     : '2016-07-02',
        end       : '2016-07-03',
        class     : 'vacation away'
        YOUR_DATA : {}
      }
    ]         
    

    Now each event would get a class name where in vuejs I could add CSS to that specific class name. Thoughts?

    Thanks for all your hard work! Andrew

    opened by anlek 8
  • Problem with calendar displaying

    Problem with calendar displaying

    Can you help please :) something wrong again: -29-12-2016-1

    That's when I include like this

    import fullCalendar from 'vue-fullcalendar';
    

    No errors in console

    Trying to find problem. Set including like this

    import fullCalendar from 'vue-fullcalendar/src/fullCalendar.vue';
    

    There is error in console:

    Uncaught (in promise) ReferenceError: defMonthNames is not defined
        at Object.format (eval at 809 (chunk.14.7d0cbdbb.js:28), <anonymous>:53:32)
        at VueComponent.dispatchEvent (eval at 811 (chunk.14.7d0cbdbb.js:44), <anonymous>:82:78)
        at VueComponent.boundFn [as dispatchEvent] (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:127:12)
        at VueComponent.created (eval at 811 (chunk.14.7d0cbdbb.js:44), <anonymous>:26:10)
        at callHook (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:2610:19)
        at VueComponent.Vue._init (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:3366:5)
        at new VueComponent (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:3485:12)
        at createComponentInstanceForVnode (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:2761:10)
        at init (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:2771:31)
        at createComponent (eval at 6 (chunk.0.ab20a1a7.js:350), <anonymous>:4122:9)
    

    If change const defMonthNames = [ to var defMonthNames = [ all works again.

    What I'm doing wrong?

    P.S.: Using

    • vue.js 2.1.8
    • vue-fullcalendar 1.0.7
    opened by Alex-Sokolov 6
  • Error when including in project

    Error when including in project

    [Vue warn]: Error when rendering component <full-calendar> at /Users/SunnyWang/code/vue-fullcalendar/src/fullCalendar.vue: 
    

    Found that in vue-calendar.js there are some place with wrong path:

    __vue_options__.__file = "/Users/SunnyWang/code/vue-fullcalendar/src/components/header.vue"
    

    Using vue.js 2.1.6

    Looks like need to be recompiled with latest version: https://github.com/vuejs/vue/commit/4b51ad048306367a6fb6fbee7445e086d855f31e

    opened by Alex-Sokolov 6
  • Events doesn't working

    Events doesn't working

    Hi, all events doesn't working in my App, could you help me?

    <appoiment-list inline-template>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <full-calendar :events="events" v-on:changeMonth="updateMonth" lang="en"></full-calendar>
                </div>
            </div>
        </div>
    </appoiment-list>
    
    Vue.component('appoiment-list', {
        data() {
            return {
    	    	events: []
    		}
        },
        components : {
            'full-calendar': require('vue-fullcalendar')    
        },
        methods: {
            'updateMonth' (start, end, current) {
                console.log('changeMonth', start, end, current)
            }
        }
    });
    opened by lucasdealmeida 5
  • Window is not defined

    Window is not defined

    If i try to import fullCalendar in my .vue file, server starts normally, but when I navigate to localhost I get the following error:

    Error: window is not defined ReferenceError: window is not defined at vue_ssr_bundle:6236:32 at vue_ssr_bundle:6231:49 at module.exports (vue_ssr_bundle:6253:70) at Object. (vue_ssr_bundle:6133:38) at webpack_require (vue_ssr_bundle:6037:31) at Object. (vue_ssr_bundle:6084:3) at webpack_require (vue_ssr_bundle:6037:31) at Object.vue_styles (vue_ssr_bundle:6066:23) at webpack_require (vue_ssr_bundle:6037:31) at vue_ssr_bundle:6057:19

    Do you have any idea, what am I doing wrong? Some guidance would be much appreciated. I am just starting with vue and have some problems figuring out SSR. Did some basic examples, now I am trying these in practice.

    opened by GrofGraf 5
  • Event background color?

    Event background color?

    Fullcalendar has a huge list of available object properties for events, and it seems many of which are not supported in vue-fullcalendar? These should just be passed through but it seems they are not.

    For example, I am currently assigning a "backgroundColor" property to each of my events from my server and fetching in Vue, but this property does not seem to translate to the fullcalendar instance.

    Documentation is not clear here on how I would achieve this. I can hack it in, but would rather avoid that.

    opened by ghost 4
  • Styling of Events via cssClass

    Styling of Events via cssClass

    I have set the cssClass for my events, using Chrome Inspector, I can see the styling is set OK.

    This is how I'm creating the events:

    ...
      getCalendar () {
          var url = this.getEndpoint('/view/calendar/now')
    
          axios.get(url).then(response => {
            this.selEvents = []
    
            for (let item in response.data) {
              let thing = {
                title: response.data[item].siteId + ' - ' + response.data[item].item,
                start: response.data[item].date,
                cssClass: 'event-' + response.data[item].type.toLowerCase(),
                data: response.data[item]
              }
              this.selEvents.push(thing)
            }
          })
          .catch(e => {
            this.selEvents = loadIssuesEvents
          })
        }
      },
    ...
    
    

    My data displays fine.

    However, it doesn't show in the calendar with styling I want, I've tried different approaches, none work:

    First Try:

    <style>
     .event-complaint {background-color: gold;}
    </style>
    
    

    Second Try:

    <style>
     .event-item .event-complaint {background-color: gold;}
    </style>
    
    

    What I am doing wroing?

    As a suggestion, more examples of how to use this component, e.g. doing event popups, calling remotedatasources etc. it would help a lot.

    Thanks for creating a great component.

    opened by adavie1 3
  • Week view

    Week view

    am using vue-calendar . it works fine for month view . Is there a way to show week view using this calendar ? or can you recommend any other calendar that have week view ?

    opened by ammadtarar 3
  • title-format options

    title-format options

    Hi, can't parse title-format in English to get the Month displaying as TEXT instead of Numbers. What formatting am I expect to send to the title-format prop?

    opened by ghost 3
  • Cannot read property 'footprint' of undefined

    Cannot read property 'footprint' of undefined

    我在进行 月 周 日切换的时候,就会报出这个Cannot read property 'footprint' of undefined 异常 。。且 周和日 的view 直接不显示了。我传的时间格式 {start: '2020-03-23 09:00:00', end: '2020-03-23 12:00:00',} 精确到了秒

    opened by laoyuerCC 6
Data Science UCSB's management of GauchoCourses, a quarterly course planner that allows students to see possible schedule combinations for the classes they want to take, and save them for when their pass times come around.

GauchoCourses Data Science UCSB's GauchoCourses application is a quarterly course planner that allows students to see possible schedule combinations f

null 9 Dec 27, 2022
FullCalendar Wrapper for vue

vue-fullcalendar Installation npm install --save vue-full-calendar Or for Vue 1.x users npm install --save [email protected] Installing the pl

Croud Tech 487 Nov 15, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 762 Jan 3, 2023
Convenient Vue wrapper for the add to calendar button snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars.

The Add to Calendar Button - optimized for Vue 3 This is a wrapper repository for the popular Add to Calendar Button, making it even more convenient,

Add to Calendar 3 Nov 9, 2022
A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here 中文文档 Requirements vue: ^2

Geoff Zhu 633 Nov 11, 2022
A easy-to-use component to show somebody's schedule list to help interview arrangement or visit arrangement.

vue-schedule-board A easy-to-use component to show somebody's schedule list to help interview arrangement or visit arrangement. 中文 To get started, che

jinfang 17 Nov 3, 2022
Simple-calendar-app - Simple Vue calendar (date-picker)

Simple vue calendar (date-picker) Vue Moment.js Installation git clone npm i npm

Dmitry Chinenov 3 Oct 31, 2022
Contra - Combines GitHub and GitLab contributions calendar to create a single calendar

Welcome to Contra ?? Combines GitHub and GitLab contributions calendar to create

Ahmet Korkmaz 10 Dec 29, 2022
The smallest Vue.js events handler.

Vuemit Vuemit is a tiny library to work with events on Vue.js. Its aim is to keeping simple the fact of sharing information between any number of comp

Gustavo Ocanto 145 Dec 23, 2022
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Nathan Reyes 3.7k Dec 31, 2022
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 485 Dec 18, 2022
Vue.js wrapper for TOAST UI Calendar

Vue TOAST UI Calendar A Vue.js wrapper for TOAST UI Calendar Installation npm install --save tui-calendar @lkmadushan/vue-tuicalendar Usage Example Tr

Kalpa Madushan Perera 129 Aug 13, 2022
Toast UI Calendar for Vue

TOAST UI Calendar for Vue This is Vue component wrapping TOAST UI Calendar. ?? Table of Contents Collect statistics on the use of open source Install

NHN 195 Dec 6, 2022
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

Manuk 425 Dec 27, 2022
A Vue JS full calendar, no dependency, no BS. :metal:

vue-cal A Vue JS full calendar, no dependency, no BS. ?? Installation npm i vue-cal Vue 3 npm i [email protected] Demo & Documentation antoniandre.github

Antoni 982 Dec 29, 2022
A full 12-Month view calendar made by vue.js.

English | 繁體中文 There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem. ?? 12

null 114 Dec 13, 2022