React-samples/src/calendar/special-dates.js at master · SyncfusionExamples/React-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ej2_react_calendars_1 = require("@syncfusion/ej2-react-calendars");
var sample_base_1 = require("../common/sample-base");
var ej2_base_1 = require("@syncfusion/ej2-base");
require("./calendar-component.css");
var Special = (function (_super) {
    __extends(Special, _super);
    function Special() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Special.prototype.specialDate = function (args, name) {
        var span = document.createElement('span');
        span.setAttribute('class', 'e-icons highlight');
        args.element.firstElementChild.setAttribute('title', name + '!');
        ej2_base_1.addClass([args.element], ['e-day', 'special', name.toLowerCase()]);
        args.element.setAttribute('data-val', name + '!');
        args.element.setAttribute('title', name + '!');
        args.element.appendChild(span);
    };
    Special.prototype.customDates = function (args) {
        /*Dates need to be customized*/
        if (args.date.getDate() === 10) {
            this.specialDate(args, "Birthday");
        }
        if (args.date.getDate() === 15) {
            this.specialDate(args, "Farewell");
        }
        if (args.date.getDate() === 25) {
            this.specialDate(args, "Vacation");
        }
    };
    Special.prototype.onchange = function (args) {
        var title = '';
        if (args.event) {
            /*Displays selected date in the label*/
            title = event.currentTarget.getAttribute('data-val');
            title = title == null ? '' : ' ( ' + title + ' )';
        }
        document.getElementById('date_label').textContent = 'Selected Value: ' + args.value.toLocaleDateString() + title;
    };
    Special.prototype.render = function () {
        return (React.createElement("div", { className: 'control-pane' },
            React.createElement("div", { className: 'control-section' },
                React.createElement("div", { className: 'calendar-control-section', style: { overflow: 'auto' } },
                    React.createElement(ej2_react_calendars_1.CalendarComponent, { renderDayCell: this.customDates.bind(this), change: this.onchange, className: 'e-customStyle' }),
                    React.createElement("label", { id: 'date_label' }, "Selected Value:"))),
            React.createElement("div", { id: "action-description" },
                React.createElement("p", null,
                    "In the below sample, specific dates are ",
                    React.createElement("code", null, "highlighted"),
                    " to bring the additional information on those dates itself to know more on selecting. Click on the special date,the tooltip information are about the date will be displayed in the label below the Calendar.")),
            React.createElement("div", { id: 'description' },
                React.createElement("p", null,
                    "Special Dates sample demonstrates, how to customize a specific dates in a calendar by using renderDayCell event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates in calendar. Here 10, 15 and 25 date's are customized with custom styles by adding the ",
                    React.createElement("code", null, "e-customStyle"),
                    " class."),
                React.createElement("p", null,
                    "More information on the customization can be found in this ",
                    React.createElement("a", { target: '_blank', href: 'https://ej2.syncfusion.com/react/documentation/calendar/customization.html#day-cell-format' }, " documentation"),
                    " section."))));
    };
    return Special;
}(sample_base_1.SampleBase));
exports.Special = Special;