@mpachnis/mp-calendar

v3.1.1

Published

3 years ago

mp calendar is a web components, providing calendar date functionality and events support, build with Polymer 3.0

Downloads

0High
0Medium
0Low

mpachnis

mpachnis calendar events polymer web-components web-component

<mp-calendar>

mp-calendar is a web component, providing calendar date functionality and events support, build with Polymer 3.0. For quick navigation between month and year, you can select one from the list. You can get previous polymer version, 1.x or 2.x, by selecting different branch.

Demo

mp-calendar docs & demo

Install:

npm install --save @mpachnis/mp-calendar

Import in a HTML file:

<html>
    <head>
        <script type="module">
            import '@mpachnis/mp-calendar/mp-calendar.js';
        </script>
    </head>
    <body>
        <mp-calendar></mp-caledanr>
    </body>
</html>

In a Polymer 3 element:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@mpachnis/mp-calendar/mp-calendar.js';

class CustomElement extends PolymerElement {
    static get template() {
        return html`
            <mp-calendar></mp-caledanr>
        `;
    }
}
customElements.define('custom-element', CustomElement);

Properties

Property | Type | Description | Default -------- | ----------- | ----------- | ----------- day-labels | Array | This property can be used to localize the elements day labels. Do not change the order | Default: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday month-labels | Array | This property can be used to localize the elements month labels. | January, February, March, April, May, June, July, August, September, October, November, December disabled-dates | Array | Disable current month's weekdays. Set the disabled dates. ex. disabled-dates="[4, 10, 12, 19, 30]"| None disabled-days | Object | Disable week days. Set the disabled days. This will read the days from dayLabels. If you use custom day labels, same values must be applyied here. ex. For default values: disabled-days='["Monday", "Thursday"]'. For custom labes: day-labels='["Su","Mo","Tu","We","Th","Fr","Sa"]' then disabled-days='["Mo", "Th"]'. | None disabled-in-months | Array | Related to disabled-dates & disabled-weeks. In which months, the disabled days or weeks will be disabled. ex. disabled-in-months="[5, 6]". The disabled-dates & disabled-weeks will effective on May & June. | All months disabled-weeks | Array | Disable month's weeks, starting from 0 to 4 for default. If show-days-in-month=42 then total weeks are from 0 to 5 | None disable-prev-days | Boolean | Disable previous month days. | false disable-next-days | Boolean | Disable next month days. | false events-file | String | Set a json file that includes the events. ex. events-file="events.json" | None events-object | Object | Set an object containing events. ex. events-object='[{"title":"Red style category","content":"Skype call at 15:40","date":"2018-07-20","category":"red", "color": "#000"}]' | None first-day-of-week | Number | Set the first day of the week. Sunday is 0, Monday is 1 and so on | 0 show-days-in-month | Number | How many day will be visible on each month, including previous and next month days. | 35 min-year | Number | Set the min year list. | 5 max-year | Number | Set the max year list. | 5 event-day-color | String | Event border color for a day with more than 3 events. Color can be set as rgb(a), hex or hsl(a) | #b56ce2

Themes

There are 3 additional theme to choose, dark, light-blue, light-grey. dark light blue light grey

You can also customize the calendar your self with the following properties:

Property | Description -------- | ----------- --main-bg | Calendar's main background color --header-bg | Calendar's header background color --main-header-color | Calendar's header color --header-icon-bg | Calendar's icons background --header-icon-opacity | header's icon opacity on hover event --inner-date-color | Current date color inside the calendar icon --labels-color | The color of the days --border-width | Calendar's border width --border-right-width | Calendar's right border (if you set it to 0 then the dates will have top and bottom border) --border-color | Calendar's border color --prev-days-bg | Calendar's previous month dates background color --prev-days-color | Calendar's previous month dates color --curr-days-bg | Calendar's current month dates background --curr-days-color | Calendar's current month dates color --next-days-bg | Calendar's next month dates background --next-days-color | Calendar's next month dates color --disabled-color | Calendar's disabled dates color --disabled-text-shadow | Calendar's disabled dates text shadow effect --selected-day-bg | Calendar's selected day background color --today-boxshadow-color | Calendar's current date shadow style, it's adding a small border style effect --selected-day-hover-bg | Calendar's selected day background color on hover

Events

There are 4 ready to use categories: red, blue, green and orange. Each day which have an event, will also have a color line at the right side, based on the category. If a day have 4 or more events, then the display color will be taken from the property event-day-color. Date format YYYY-MM-DD. If you change the json file on events-file or an event on events-object, calendar will automatically show the changes. Example:

[
    {
        "title": "Skype",
        "content": "Skype call at 15:40",
        "date": "2017-06-02",
        "color": "#000"
    },
    {
        "title": "Meeting",
        "content": "Meeting at 14:00",
        "date": "2017-06-05",
        "category": "orange"
    },
    {
        "title": "Notification",
        "content": "Just a notification",
        "date": "2017-06-10",
        "category": "green"
    },
    {
        "title": "Appointment",
        "content": "Doctor's appointment at 20:00",
        "date": "2017-06-18",
        "category": "blue"
    }
]

Icons

Arrow icons designed by Designerz Base

License

MIT License

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme