<template>
    <v-app id="pages-dasboard">
      <div>
        <full-calendar
          ref="calendar"
          :event-sources="eventSources"
          @event-selected="eventSelected"
          @event-created="eventCreated"
          :config="config"
        ></full-calendar>
      </div>
      <v-dialog v-model="dialog" max-width="500">
        <v-card color="grey lighten-4" flat>
          <v-toolbar dark color="fixcolors">
            <v-toolbar-side-icon></v-toolbar-side-icon>
            <v-toolbar-title class="white--text">Title</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon @click="dialog= false">
              <v-icon>close</v-icon>
            </v-btn>
          </v-toolbar>
          <v-flex class="py-4">
            <v-list-tile>
              <v-list-tile-action>
                <v-icon>edit</v-icon>

              </v-list-tile-action>
              <v-list-tile-content>

                <v-list-tile-title>{{ selected.title }}</v-list-tile-title>

              </v-list-tile-content>
            </v-list-tile>

            <v-list-tile>
              <v-list-tile-action>
                <v-icon>access_time</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
                <v-list-tile-sub-title>{{ date(selected.end) }}</v-list-tile-sub-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-flex>
        </v-card>
      </v-dialog>

      <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 moment from "moment";

  
  export default {

    data() {
      return {
        showLoader: false,
        dialog: false,
        events: [
          {
            id: 1,
            title:
              "property to add transparency to a button transparency,property to add transparency to a button transparency",
            start: "2019-09-04 09:30:26.123"

          },

          {
            id: 2,
            title: "event2",
            start: "2019-09-06 09:30:26.123",
            end: "2019-09-07 09:31:26.123",

          },

          {
            id: 3,
            title: "event3",
            start: "2019-09-08 09:30:26.123",
            end: "2019-09-09 09:35:26.123",

          }

        ],
        config: {
          eventClick: event => {
            this.selected = event;
            this.dialog = true;

          }
        },

        selected: {},
      };
    },

    methods: {

      date: function(date) {
        return moment(date).format("MMMM DD, YYYY  HH:mm:ss");

      },

      refreshEvents() {
        this.$refs.calendar.$emit("refetch-events");
      },
      removeEvent() {
        this.$refs.calendar.$emit("remove-event", this.selected);
        this.selected = {};
      },
      eventSelected(event) {
        this.selected = event;
      },
      eventCreated(...test) {
        console.log(test);

      },

    },
    computed: {

      eventSources() {
        const self = this;
        return [
          {
            events(start, end, timezone, callback) {
              setTimeout(() => {
                callback(self.events.filter(() => Math.random() > 0.5));
              }, 1000);
            }
          }
        ];

      }

    }
  };
  </script>

  <style>

  @import "fullcalendar/dist/fullcalendar.css";
  .fc button {
    background: #39b982 !important;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 6px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 8px 2px !important;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .v-tabs__div {
    text-transform: none;
  }
  .v-input__prepend-outer {
    margin-right: 0px !important;
  }
  .v-card__actions .v-btn {
    margin: 0 15px;
    min-width: 120px;
  }
  .primary {
    background-color: #aaa !important;
    border-color: #aaa !important;
  }
  h4 {
    background-repeat: no-repeat;
    padding: 8px;
    margin: auto;
    font-size: 25px;
  }
  #name {
    position: absolute;
    left: 100px;
    top: 17px;
  }
  #icon {
    position: absolute;
    right: 8px;
    top: 8px;
  }
  #m {
    position: relative;
    left: 135px;
    top: -15px;
  }
  #G {
    position: absolute;
    top: 38px;
    color: white;
  }
  #bt {
    position: relative;
    top: -20px;
    left: 115px;
  }
  #e {
    position: relative;
    top: 5px;
    right: -30px;
    height: 17px;
    cursor: pointer;
  }
  #d {
    position: relative;
    top: 5px;
    right: -70px;
    height: 17px;
    cursor: pointer;
  }
  #indexId {
    padding: 0 0px !important;
  }
  #td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  #dialog {
    height: 550px;
  }
  .active {
    background-color: black;
    color: white !important;
  }
  .activebtn {
    color: black !important;
  }
  #flex {
    height: 300px;
  }
  .top {
    margin-top: 100px;
  }
  .v-tabs__item a {
    font-size: 16px !important;
  }
  @media screen and (max-width: 769px) {
    .top {
      margin-top: 0 !important;
    }
    .userSearch .v-icon {
      font-size: 20px !important;
      margin-left: 20px;
    }
  }
  @media screen and (max-width: 380px) {
    .pl-3 {
      padding-left: 0px !important;
    }
    .right {
      float: none !important;
    }
    .subheading {
      font-size: 14px !important;
    }
    .v-card__actions .v-btn {
      margin: 0 0px;
      min-width: 100px;
    }
    .subheading {
      font-size: 12px !important;
    }
    h5 {
      font-size: 13px;
    }
  }
  .v-icon {
    font-size: 30px;
  }
  @media screen and (min-width: 1270px) {
    .hide {
      display: none;
    }
  }
  @media screen and (max-width: 420px) {
    .userSearch .v-text-field .v-label {
      line-height: 24px !important;
    }
    .userSearch .v-label {
      font-size: 13px !important;
    }
    .v-list__tile {
      font-size: 14px;
      padding: 0 10px;
    }
    .name {
      font-size: 15px;
    }

  }

  </style>