イベント機能を作り始める

2017-12-14 21:30 to 2017-12-14 23:43

概要

とりあえずfullCalendarが動いて多少モチベーションが上がってきたのでイベント機能を作り始める。

目標

登録くらいはできるようにしたい。

経過

2017-12-14 23:46

とりあえず登録してカレンダーに表示するとこまで作った。

コンポーネントは下記のような感じ。結局fullCalendarとmomentは別途scriptタグで読み込んでいるという…。npm対応のちゃんとした大きいカレンダーはどうもないらしい。

<template>
  <div id="calendar">
  </div>
</template>

<style scoped>
</style>

<script>
import moment from 'moment'

export default {
  props: ['group_id', 'month', 'events'],

  data () {
    return {
      currentEvents: this.events === undefined ? [] : this.events,
    }
  },

  mounted() {
    if (this.month !== undefined) {

    }
    $('#calendar').fullCalendar({
      locale: 'ja',
      header: {
        right:  'month,agendaWeek,agendaDay today prev,next'
      },
      views: {
        month: {
          titleFormat: 'YYYY年 MMMM',
        },
      },
      buttonText: {
        today: '今日',
        month: '月',
        week: '週',
        day: '日',
      },
      defaultDate: this.getDefaultDate(),
      events: this.currentEvents,
      dayClick: this.dayClick.bind(this),
    });
  },

  methods: {
    dayClick(date, jsEvent, view) {
      const dateText = date.format('YYYY-MM-DD');
      if (view.name == 'month') {
        location.href = `/${this.group_id}/schedules/new?date=${dateText}`; 
      } else {
        const timeText = date.format('HH:mm:ss');
        location.href = `/${this.group_id}/schedules/new?date=${dateText}&time=${timeText}`; 
      }
    },

    getDefaultDate() {
      if (this.month !== undefined) {
        return moment(this.month + '-01');
      } else {
        return moment();
      }
    }
  }
}
</script>

Copying live

(今回分は未反映)

コメント