import './demo5.css';
import Calendar from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
const currentDate = moment();
const localeData = currentDate.clone().localeData();
const monthLocale = localeData.monthsShort();
function dateCellRender(date) {
    const dateNum = date.date();
    if (currentDate.month() !== date.month()) {
        return dateNum;
    }
    let eventList;
    switch (dateNum) {
        case 1:
            eventList = [
                { type: 'primary', content: 'Event 1' },
                { type: 'normal', content: 'Event 2' },
            ];
            break;
        case 10:
            eventList = [
                { type: 'normal', content: 'Event 3' },
                { type: 'normal', content: 'Event 4' },
            ];
            break;
        case 11:
            eventList = [
                { type: 'primary', content: 'Event 5' },
                { type: 'primary', content: 'Event 6' },
            ];
            break;
        default:
            eventList = [];
    }
    return (React.createElement("div", { className: "custom-calendar-cell" },
        React.createElement("div", { className: "custom-calendar-cell-value" }, dateNum),
        React.createElement("div", { className: "custom-calendar-cell-content" },
            React.createElement("ul", { className: "event-list" }, eventList.map((item, key) => React.createElement("li", { className: `${item.type}-event`, key: key }, item.content))))));
}
function monthCellRender(date) {
    if (currentDate.month() === date.month()) {
        return (React.createElement("div", null,
            React.createElement("div", null, monthLocale[date.month()]),
            React.createElement("div", null, "Events")));
    }
    return monthLocale[date.month()];
}
ReactDOM.render(React.createElement(Calendar, { dateCellRender: dateCellRender, monthCellRender: monthCellRender }), document.getElementById('calendar-demo-5'));
