Free javascript Hosting


ui-appointment-calendar.js

Uploaded on Mar 17 2022 17:27 by mike_bat

/*
* MIT License
*
* Copyright (c) 2020 KULDIP PIPALIYA <kuldipem@gmail.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
*/

/* global jQuery, moment */

(function () {
moment.locale('gr', {
weekdays: ['ΚΞ₯Ξ‘Ξ™Ξ‘ΞšΞ—', 'ΔΕΞ₯΀ΕΑΑ', '΀ΑΙ΀Η', '΀Ε΀ΑΑ΀Η', 'Ξ Ξ•ΞœΞ Ξ€Ξ—', 'Ξ Ξ‘Ξ‘Ξ‘Ξ£ΞšΞ•Ξ₯Ξ—', 'Ξ£Ξ‘Ξ’Ξ’Ξ‘Ξ€ΞŸ'],
weekdaysShort: ['ΚΞ₯', 'ΔΕ', '΀Α', '΀Ε', 'Ξ Ξ•', 'Ξ Ξ‘', 'ΣΑ'],
week: {
dow: 1, // Monday is the first day of the week.
doy: 4 // @TODO: https://momentjs.com/docs/#/customization/dow-doy/
}
})
moment.locale('gr')
})()

/**
* @param {number} number
*/
// eslint-disable-next-line no-unused-vars
const addPadding = (number) => {
if (number <= 9) {
return `0${number}`
}
return `${number}`
}

/**
* @param {string} containerId
* @param {Moment} currentDate
* @param {Array<string>} times
* @param {Array<Object>} schedules
* @param {Object} options
*/
// eslint-disable-next-line no-unused-vars
const initCalendar = (containerId, currentDate, times, schedules, options = {}) => {
const APPOINTMENT_CAN_BE_BOOKED_BEFORE = 1 // in hours
const ADVANCE_BOOKING = 7 // in days
const defaultFunction = () => null
const {
onClickAppointment = defaultFunction,
onInit = defaultFunction,
isAdmin = true,
onRenderCell = defaultFunction
} = options

const container = document.getElementById(containerId)
const table = document.createElement('table')
const tableBody = document.createElement('tbody')
const tableHeader = document.createElement('thead')
const headingRow = document.createElement('tr')
const blankHead = document.createElement('th')
const dayOfWeek = currentDate.day()
const headers = [blankHead]
const rows = []

let startAgainFrom = 0

container.classList.add('cal-container')
table.classList.add('cal-table')

for (let i = 0; i < ADVANCE_BOOKING; i++) {
const th = document.createElement('th')
const p = document.createElement('p')
const lblDate = currentDate.clone().add(i, 'days')
const dayOfWeek = lblDate.day()
const columnHeader = `${lblDate.format('dddd')}\n${lblDate.format('DD/MM')}`

let ptr = dayOfWeek + i

if (ptr > (ADVANCE_BOOKING - 1)) {
ptr = startAgainFrom
startAgainFrom++
}

p.innerText = columnHeader
th.appendChild(p)
headers.push(th)
}
jQuery(headingRow).append(...headers)

for (let j = 0; j < times.length; j++) {
const timeKeyAsId = times[j]
const hour = timeKeyAsId.substr(0, 2)
const minute = timeKeyAsId.substr(2, 2)
const time = [hour, minute].join(':')
const tr = document.createElement('tr')
const td = document.createElement('td')
const p = document.createElement('p')

p.innerText = time
td.appendChild(p)
tr.appendChild(td)

const timeBasedSchedules = schedules.filter((schedule) => {
return schedule.from === timeKeyAsId
})

for (let l = 0; l < ADVANCE_BOOKING; l++) {
const td = document.createElement('td')
const div = document.createElement('div')
const p = document.createElement('p')
const keyDate = currentDate.clone().add(l, 'days')
const key = `${keyDate.format('YYYYMMDD')}${timeKeyAsId}`
const id = `cell-${key}`
const scheduleMoment = currentDate.clone().add(l, 'days')
scheduleMoment.set({
hour: parseInt(hour, 10),
minute: parseInt(minute, 10),
second: 0
})
const scheduleForThisDay = timeBasedSchedules.find((schedule) => {
return parseInt(schedule.day, 10) === keyDate.day()
})
const decoration = onRenderCell(scheduleMoment, scheduleForThisDay)

if (scheduleForThisDay != null) {
let allowedToBooking = true

p.innerText = scheduleForThisDay.className
div.classList.add('cell-container')
div.appendChild(p)
if (decoration !== null) {
jQuery(div).append(decoration)
}
td.appendChild(div)

jQuery(td).css({
backgroundColor: scheduleForThisDay.color
})

if (isAdmin) {
jQuery(td).addClass('clickable')
td.addEventListener('click', () => {
onClickAppointment(scheduleMoment, scheduleForThisDay)
})
} else {
if (dayOfWeek === keyDate.day()) {
const stopBookingAt = currentDate.clone()
const from = scheduleForThisDay.from
const hour = parseInt(from.substr(0, 2), 10)
const minute = parseInt(from.substr(2, 2), 10)
const second = parseInt(from.substr(4, 2), 10)

stopBookingAt.set({
hour,
minute,
second
}).subtract(APPOINTMENT_CAN_BE_BOOKED_BEFORE, 'hour')

allowedToBooking = stopBookingAt.isSameOrAfter(currentDate)
}
if (allowedToBooking) {
jQuery(td).addClass('clickable')
} else {
jQuery(td).addClass('passed')
}
td.addEventListener('click', () => {
if (allowedToBooking) {
onClickAppointment(scheduleMoment, scheduleForThisDay)
}
})
}
}

td.id = id
tr.appendChild(td)
}

rows.push(tr)
}

jQuery(tableBody).append(...rows)
tableHeader.appendChild(headingRow)
table.appendChild(tableHeader)
table.appendChild(tableBody)
container.appendChild(table)
onInit()
}

Back to list