mc
mp-calendar
npm i mp-calendar
Deprecated!
Package move to scope, use npm i @mpachnis/mp-calendar
mc

mp-calendar

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

by Minas Pachnis

3.0.0 (see all)License:MITTypeScript:Not Found
npm i mp-calendar
Readme

Published on webcomponents.org Published on Vaadin  Directory Stars on vaadin.com/directory

<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

PropertyTypeDescriptionDefault
day-labelsArrayThis property can be used to localize the elements day labels. Do not change the orderDefault: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday
month-labelsArrayThis property can be used to localize the elements month labels.January, February, March, April, May, June, July, August, September, October, November, December
disabled-datesArrayDisable current month's weekdays. Set the disabled dates. ex. disabled-dates="[4, 10, 12, 19, 30]"None
disabled-daysObjectDisable 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-monthsArrayRelated 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-weeksArrayDisable month's weeks, starting from 0 to 4 for default. If show-days-in-month=42 then total weeks are from 0 to 5None
disable-prev-daysBooleanDisable previous month days.false
disable-next-daysBooleanDisable next month days.false
events-fileStringSet a json file that includes the events. ex. events-file="events.json"None
events-objectObjectSet 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-weekNumberSet the first day of the week. Sunday is 0, Monday is 1 and so on0
show-days-in-monthNumberHow many day will be visible on each month, including previous and next month days.35
min-yearNumberSet the min year list.5
max-yearNumberSet the max year list.5
event-day-colorStringEvent 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:

PropertyDescription
--main-bgCalendar's main background color
--header-bgCalendar's header background color
--main-header-colorCalendar's header color
--header-icon-bgCalendar's icons background
--header-icon-opacityheader's icon opacity on hover event
--inner-date-colorCurrent date color inside the calendar icon
--labels-colorThe color of the days
--border-widthCalendar's border width
--border-right-widthCalendar's right border (if you set it to 0 then the dates will have top and bottom border)
--border-colorCalendar's border color
--prev-days-bgCalendar's previous month dates background color
--prev-days-colorCalendar's previous month dates color
--curr-days-bgCalendar's current month dates background
--curr-days-colorCalendar's current month dates color
--next-days-bgCalendar's next month dates background
--next-days-colorCalendar's next month dates color
--disabled-colorCalendar's disabled dates color
--disabled-text-shadowCalendar's disabled dates text shadow effect
--selected-day-bgCalendar's selected day background color
--today-boxshadow-colorCalendar's current date shadow style, it's adding a small border style effect
--selected-day-hover-bgCalendar'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

Downloads/wk

2

GitHub Stars

19

LAST COMMIT

3mos ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
3.0.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial