iep-ui/es/fullcalendar/components/header.js

An enterprise-class UI design language and Vue-based implementation

import moment from 'moment';

export default {
  props: {
    currentMonth: {},
    titleFormat: {},
    firstDay: {},
    monthNames: {},
    locale: {}
  },
  data: function data() {
    return {
      leftArrow: '<',
      rightArrow: '>'
    };
  },

  computed: {
    title: function title() {
      if (!this.currentMonth) return;
      return this.currentMonth.locale(this.locale).format('MMMM YYYY');
    }
  },
  methods: {
    goPrev: function goPrev() {
      var newMonth = moment(this.currentMonth).subtract(1, 'months').startOf('month');
      this.$emit('change', newMonth);
    },
    goNext: function goNext() {
      var newMonth = moment(this.currentMonth).add(1, 'months').startOf('month');
      this.$emit('change', newMonth);
    }
  },
  render: function render() {
    var h = arguments[0];

    return h(
      'div',
      { 'class': 'full-calendar-header' },
      [h(
        'div',
        { 'class': 'header-left' },
        [this.$slots.headerLeft]
      ), h(
        'div',
        { 'class': 'header-center' },
        [this.$slots.headerCenter]
      ), h(
        'div',
        { 'class': 'header-right' },
        [h(
          'a-button',
          {
            on: {
              'click': this.goPrev
            }
          },
          [h(
            'span',
            { 'class': 'prev-month' },
            [this.leftArrow]
          )]
        ), h(
          'span',
          { 'class': 'title' },
          [this.title]
        ), h(
          'a-button',
          {
            on: {
              'click': this.goNext
            }
          },
          [h(
            'span',
            { 'class': 'next-month' },
            [this.rightArrow]
          )]
        )]
      )]
    );
  }
};