<!--<template>
  <v-app >
    <v-toolbar class="fixcolors" fixed app>
      <v-toolbar-title class="ml-0 pl-3">
        <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
        <v-btn icon large flat slot="activator">
          <v-avatar size="40px">
            <img src="/static/icon/user.png" />
          </v-avatar>
        </v-btn>
        <v-list class="pa-0">
          <v-list-tile
            v-for="(item,index) in items"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
            @click="item.click"
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="index"
          >
            <v-list-tile-action v-if="item.icon">
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-toolbar>
    <ds-calendar-app ref="appRoot" :calendar="calendar" :read-only="readOnly" @change="saveState">
      <template slot="title">DaySpan</template>
      
      <template slot="menuRight">
        <v-btn icon large href="https://github.com/ClickerMonkey/dayspan-vuetify" target="_blank">
          <v-avatar size="32px" tile>
            <img src="https://simpleicons.org/icons/github.svg" alt="Github" />
          </v-avatar>
        </v-btn>
      </template>

      <template slot="eventPopover" slot-scope="slotData">
        <ds-calendar-event-popover v-bind="slotData" :read-only="readOnly" @finish="saveState"></ds-calendar-event-popover>
      </template>
      
      <template slot="eventCreatePopover" slot-scope="{placeholder, calendar, close}">
        <ds-calendar-event-create-popover
          @create-edit="$refs.app.editPlaceholder"
          @create-popover-closed="saveState"
        ></ds-calendar-event-create-popover>
      </template>

      <template slot="eventTimeTitle" slot-scope="{calendarEvent, details}">
        <div>
          <v-icon
            class="ds-ev-icon"
            v-if="details.icon"
            size="14"
            :style="{color: details.forecolor}"
          >{{ details.icon }}</v-icon>
          <strong class="ds-ev-title">{{ details.title }}</strong>
        </div>
        <div class="ds-ev-description">{{ getCalendarTime( calendarEvent ) }}</div>
      </template>

      <template slot="drawerBottom">
        <div class="pa-3">
          <v-checkbox label="Read Only?" v-model="readOnly"></v-checkbox>
        </div>
      </template>
    </ds-calendar-app>
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </v-app>
</template>

<script>
import http from "@/Services/http.js";
import Util from "@/util";
import { Calendar, Weekday, Month } from "dayspan";
import Vue from "vue";

export default {
  data: () => ({
    showLoader: false,
    storeKey: "dayspanState",
    calendar: Calendar.months(),
    readOnly: true,
    defaultEvents: [
      {
        data: {
          title: "Weekly Meeting",
          color: "#3F51B5"
        },
        schedule: {
          dayOfWeek: [Weekday.MONDAY],
          times: [9],
          duration: 30,
          durationUnit: "minutes"
        }
      },
      {
        data: {
          title: "First Weekend",
          color: "#4CAF50"
        },
        schedule: {
          weekspanOfMonth: [0],
          dayOfWeek: [Weekday.FRIDAY],
          duration: 3,
          durationUnit: "days"
        }
      },
      {
        data: {
          title: "End of Month",
          color: "#000000"
        },
        schedule: {
          lastDayOfMonth: [1],
          duration: 1,
          durationUnit: "hours"
        }
      },
      {
        data: {
          title: "Mother's Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.MAY],
          dayOfWeek: [Weekday.SUNDAY],
          weekspanOfMonth: [1]
        }
      },
      {
        data: {
          title: "New Year's Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.JANUARY],
          dayOfMonth: [1]
        }
      },
      {
        data: {
          title: "Inauguration Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.JANUARY],
          dayOfMonth: [20]
        }
      },
      {
        data: {
          title: "Martin Luther King, Jr. Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.JANUARY],
          dayOfWeek: [Weekday.MONDAY],
          weekspanOfMonth: [2]
        }
      },
      {
        data: {
          title: "George Washington's Birthday",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.FEBRUARY],
          dayOfWeek: [Weekday.MONDAY],
          weekspanOfMonth: [2]
        }
      },
      {
        data: {
          title: "Memorial Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.MAY],
          dayOfWeek: [Weekday.MONDAY],
          lastWeekspanOfMonth: [0]
        }
      },
      {
        data: {
          title: "Independence Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.JULY],
          dayOfMonth: [4]
        }
      },
      {
        data: {
          title: "Labor Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: 
      <template slot="menuRight">
        <v-btn icon large href="https://github.com/ClickerMonkey/dayspan-vuetify" target="_blank">
          <v-avatar size="32px" tile>
            <img src="https://simpleicons.org/icons/github.svg" alt="Github" />
          </v-avatar>
        </v-btn>
      </template> {
          month: [Month.SEPTEMBER],
          dayOfWeek: [Weekday.MONDAY],
          lastWeekspanOfMonth: [0]
        }
      },
      {
        data: {
          title: "Columbus Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.OCTOBER],
          dayOfWeek: [Weekday.MONDAY],
          weekspanOfMonth: [1]
        }
      },
      {
        data: {
          title: "Veterans Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.NOVEMBER],
          dayOfMonth: [11]
        }
      },
      {
        data: {
          title: "Thanksgiving Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.NOVEMBER],
          dayOfWeek: [Weekday.THURSDAY],
          weekspanOfMonth: [3]
        }
      },
      {
        data: {
          title: "Christmas Day",
          color: "#2196F3",
          calendar: "US Holidays"
        },
        schedule: {
          month: [Month.DECEMBER],
          dayOfMonth: [25]
        }
      }
    ],
    items: [
      {
        href: "/changepassword",
        title: "Change Password",
        click: e => {
          console.log(e);
        }
      },
      {
        href: "#",
        title: "Logout",
        click: e => {
          window.getApp.$emit("APP_LOGOUT");
        }
      }
    ]
  }),
  methods: {
    handleDrawerToggle() {
      window.getApp.$emit("APP_DRAWER_TOGGLED");
    },
    handleFullScreen() {
      Util.toggleFullScreen();
    },
    // getCalendarTime(calendarEvent) {
    //   let sa = calendarEvent.start.format("a");
    //   let ea = calendarEvent.end.format("a");
    //   let sh = calendarEvent.start.format("h");
    //   let eh = calendarEvent.end.format("h");

    //   if (calendarEvent.start.minute !== 0) {
    //     sh += calendarEvent.start.format(":mm");
    //   }

    //   if (calendarEvent.end.minute !== 0) {
    //     eh += calendarEvent.end.format(":mm");
    //   }

    //   return sa === ea ? sh + " - " + eh + ea : sh + sa + " - " + eh + ea;
    // },

    // saveState() {
    //   let state = this.calendar.toInput(true);
    //   let json = JSON.stringify(state);

    //   localStorage.setItem(this.storeKey, json);
    // },

    loadState() {
      let state = {};

      try {
        let savedState = JSON.parse(localStorage.getItem(this.storeKey));

        if (savedState) {
          state = savedState;
          state.preferToday = false;
        }
      } catch (e) {
        // eslint-disable-next-line
        console.log(e);
      }

      if (!state.events || !state.events.length) {
        state.events = this.defaultEvents;
      }

      state.events.forEach(ev => {
        let defaults = this.$dayspan.getDefaultEventDetails();

        ev.data = Vue.util.extend(defaults, ev.data);
      });

      this.$refs.appRoot.setState(state);
    }
  },
  computed: {
    toolbarColor() {
      return this.$vuetify.options.extra.mainNav;
    }
  },
  mounted() {
    window.appRoot = this.$refs.appRoot;

    this.loadState();
  }
};
</script>

<style>
.ds-expand {
  padding: 0 !important;
}
</style>
-->