A horizontal calendar makes it easy to display resources as rows and visualize a certain status for those resources for date intervals. The type of visualization is not meant to be used on devices with small screens. Still the final version will be functionally working fine on devices with small screens by having a scrollable table. The visualization might make mostly sense in administrational environments.
- visualize people and their holidays
- visualize appartments and the days when they are free / booked
- visualize cars for renting
Currently please clone the repository and run "npm run serve". After that you can visit "http://localhost:8080/"
The VueJS framework must be globally available.
<calendar :render-days="26" :calendar-data="tableData" />
- render-days: the amount of days as cells the calendar should render
- calendar-data: an array full of data to render the rows for the calendar
Example:
data: [
{
id: 1,
name: "Something Beautiful",
occupations: [
{
id: 1,
name: "Conference",
startDate: todayDate,
endDate: todayDate + days(2)
},
{
id: 2,
name: "Holliday",
startDate: todayDate + days(2),
endDate: todayDate + days(6),
background: "orange"
}
],
marks: [
{
id: 1,
name: "Arrival",
date: todayDate + days(8)
},
{
id: 2,
name: "Arrival",
date: todayDate + days(10)
}
]
},
{
id: 2,
name: "Something else",
occupations: [
{
id: 1,
name: "Lunchparty",
startDate: todayDate - days(8),
endDate: todayDate,
background: "orange"
},
{
id: 2,
name: "Work",
startDate: todayDate + days(1),
endDate: todayDate + days(3)
}
]
},
{
id: 3,
name: "Super long",
occupations: [
{
id: 1,
name: "Super Long Booking",
startDate: todayDate - days(33),
endDate: todayDate + days(33),
background: "lightsalmon"
}
]
}
]
npm install
npm run serve
npm run build
npm run lint
npm run test:e2e
npm run test:unit