swarmlab-hybrid/src/components/manageservices/calendarview.vue

<template>
	<div id="appcalendar" >

		<div class="calendar-parent">
			<calendar-view
				:items="items"
				:show-date="showDate"
				:time-format-options="{ hour: 'numeric', minute: '2-digit' }"
				:enable-drag-drop="false"
				:disable-past="disablePast"
				:disable-future="disableFuture"
				:show-times="showTimes"
				:display-period-uom="displayPeriodUom"
				:display-period-count="displayPeriodCount"
				:starting-day-of-week="startingDayOfWeek"
				:class="themeClasses"
				:period-changed-callback="periodChanged"
				:current-period-label="useTodayIcons ? 'icons' : ''"
				:displayWeekNumbers="displayWeekNumbers"
				:enable-date-selection="true"
				:selection-start="selectionStart"
				:selection-end="selectionEnd"
				:timeFormatOptions="timeFormatOptions"
				@date-selection-start="setSelection"
				@date-selection="setSelection"
				@date-selection-finish="finishSelection"
				@drop-on-date="onDrop"
				@click-date="onClickDay"
				@click-item="onClickItem"
			>
				<calendar-view-header
					slot="header"
					slot-scope="{ headerProps }"
					:header-props="headerProps"
					@input="setShowDate"
				/>
			</calendar-view>
		</div>

	</div>
</template>
<script>

import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
// Load CSS from the local repo
require("vue-simple-calendar/static/css/default.css")
require("vue-simple-calendar/static/css/holidays-us.css")

import {
	CalendarView,
	CalendarViewHeader,
	CalendarMathMixin,
} from "vue-simple-calendar/src/components/bundle.js" // local repo

export default {
	components: {
    card,
		CalendarView,
		CalendarViewHeader,
	},
	mixins: [CalendarMathMixin],
	data() {
		return {
			showDate: this.thisMonth(1),
			message: "",
			startingDayOfWeek: 1,
			disablePast: false,
			disableFuture: false,
			displayPeriodUom: "month",
			displayPeriodCount: 1,
			displayWeekNumbers: true,
			showTimes: false,
			selectionStart: null,
			selectionEnd: null,
			newItemTitle: "",
			newItemStartDate: "",
			newItemEndDate: "",
			useDefaultTheme: true,
			useHolidayTheme: false,
			useTodayIcons: true,
      timeFormatOptions:{
				hour: 'numeric', minute: 'numeric',
				hour12: false,
				timeZone: 'Europe/Athens'
			},
       begindate:'',
       enddate:'',
			items: [],
		}
	},
	computed: {
		getevents4month() {
		},
		userLocale() {
			return this.getDefaultBrowserLocale
		},
		dayNames() {
			return this.getFormattedWeekdayNames(this.userLocale, "long", 0)
		},
		themeClasses() {
			return {
				"theme-default": this.useDefaultTheme,
				"holiday-us-traditional": this.useHolidayTheme,
				"holiday-us-official": this.useHolidayTheme,
			}
		},
	},
	mounted() {
		this.newItemStartDate = this.isoYearMonthDay(this.today())
		this.newItemEndDate = this.isoYearMonthDay(this.today())
	  const t = new Date()
			let bd_y = t.getFullYear()
			let bd_m = (t.getMonth() + 1).toString().padStart(2, "0");
			let bd_d = '01';
      this.begindate = `${bd_y}-${bd_m}-${bd_d}`
      this.enddate = `${bd_y}-${bd_m}-31`
      this.getevents()
	},

	methods: {
		async getevents() {
       var value1 = {}
       value1.begin = this.begindate
       value1.end = this.enddate
      	var llo = await store.dispatch('pipelineLLO/getevents', value1)
        this.items = llo.data.result;
				console.log('events'+JSON.stringify(llo))
		},
		periodChanged(v) {
			// range, eventSource) {
			// Demo does nothing with this information, just including the method to demonstrate how
			// you can listen for changes to the displayed range and react to them (by loading items, etc.)
			console.log(v)
			//console.log(v.periodStart)
			//console.log(v.periodEnd)

			let t = v.periodStart
			let bd_y = t.getFullYear()
			let bd_m = (t.getMonth() + 1).toString().padStart(2, "0");
			let bd_d = t.getDate().toString().padStart(2, "0");
      this.begindate = `${bd_y}-${bd_m}-${bd_d}`

			let e = v.periodEnd
			let ed_y = e.getFullYear()
			let ed_m = (e.getMonth() + 1).toString().padStart(2, "0");
			let ed_d = e.getDate().toString().padStart(2, "0");
      this.enddate = `${ed_y}-${ed_m}-${ed_d}`
      
      this.getevents()
			//console.log(this.begindate)
			//console.log(this.enddate)
		},
		thisMonth(d, h, m) {
			const t = new Date()
			return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0)
		},
		onClickDay(d) {
			this.selectionStart = null
			this.selectionEnd = null
			this.message = `You clicked: ${d.toLocaleDateString()}`
		},
		onClickItem(e) {
			this.message = `You clicked: ${e.title}`
			console.log(e)
      this.$root.$emit('hybrid_labobject_view',e)
		},
		setShowDate(d) {
			this.message = `Changing calendar view to ${d.toLocaleDateString()}`
			this.showDate = d
		},
		setSelection(dateRange) {
			this.selectionEnd = dateRange[1]
			this.selectionStart = dateRange[0]
		},
		finishSelection(dateRange) {
			this.setSelection(dateRange)
			this.message = `You selected: ${this.selectionStart.toLocaleDateString()} -${this.selectionEnd.toLocaleDateString()}`
		},
		onDrop(item, date) {
			this.message = `You dropped ${item.id} on ${date.toLocaleDateString()}`
			// Determine the delta between the old start date and the date chosen,
			// and apply that delta to both the start and end date to move the item.
			const eLength = this.dayDiff(item.startDate, date)
			item.originalItem.startDate = this.addDays(item.startDate, eLength)
			item.originalItem.endDate = this.addDays(item.endDate, eLength)
		},
		clickTestAddItem() {
			this.items.push({
				startDate: this.newItemStartDate,
				endDate: this.newItemEndDate,
				title: this.newItemTitle,
				id: "e" + Math.random().toString(36).substr(2, 10),
			})
			this.message = "You added a calendar item!"
		},
	},
}
</script>

<style>
html,
body {
	height: 100%;
	margin: 0;
	background-color: #f7fcff;
}

#appcalendar {
	display: flex;
	flex-direction: row;
	font-family: Calibri, sans-serif;
	//width: 95vw;
	width: 100%;
	min-width: 30rem;
	max-width: 100rem;
	min-height: 40rem;
	margin-left: auto;
	margin-right: auto;
}


.calendar-controls {
	margin-right: 1rem;
	min-width: 14rem;
	max-width: 14rem;
}

.calendar-parent {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow-x: hidden;
	overflow-y: hidden;
	max-height: 80vh;
	background-color: white;
}

/* For long calendars, ensure each week gets sufficient height. The body of the calendar will scroll if needed */
.cv-wrapper.period-month.periodCount-2 .cv-week,
.cv-wrapper.period-month.periodCount-3 .cv-week,
.cv-wrapper.period-year .cv-week {
	min-height: 6rem;
}

/* These styles are optional, to illustrate the flexbility of styling the calendar purely with CSS. */

/* Add some styling for items tagged with the "birthday" class */
.theme-default .cv-item.birthday {
	background-color: #e0f0e0;
	border-color: #d7e7d7;
}

.theme-default .cv-item.birthday::before {
	content: "\1F382"; /* Birthday cake */
	margin-right: 0.5em;
}
</style>