ej2-javascript-samples/src/datetimepicker/special.html at master · jesusarockias/ej2-javascript-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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<div class="col-lg-12 control-section">
    <div id="wrapper">
        <input id="datetimepicker" type="text" />
        <br/>
        <br/>
    </div>
</div>
<div id="action-description">
    <p>
        In the following sample, specific dates are
        <code>highlighted</code> to notify the additional information of that date. Click the special date and the tooltip information about the
        date will be displayed when hovered.
    </p>
</div>
<div id="description">
    <p>
        Special Dates sample demonstrates, how to customize a specific dates in a datetimepicker by using
        <code>renderDayCell</code> event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific
        dates in datetimepicker. Here 10, 15 and 25 date's are customized with custom styles and custom classes.
    </p>
    <p>More information on the DateTimePicker customization can be found in the
        <a href="http://ej2.syncfusion.com/documentation/datetimepicker/customization.html" target="_blank"> documentation section</a>.</p>
    </p>
</div>
<style>
    #wrapper {
        max-width: 246px;
        margin: 30px auto;
        padding-top: 50px;
    }

    .e-customStyle span.e-icons.highlight {
        margin-top: -13px;
        display: block;
        margin-left: 4px;
    }

    .e-customStyle span.e-icons.highlight,
    .e-customStyle span.e-icons.highlight:before {
        color: rgb(0, 0, 255);
    }

    body.highcontrast .e-customStyle td.birthday span.e-icons.highlight,
    body.highcontrast .e-customStyle td.birthday span.e-icons.highlight:before {
        color: #ff6161;
    }

    body.highcontrast .e-customStyle td.farewell span.e-icons.highlight,
    body.highcontrast .e-customStyle td.farewell span.e-icons.highlight:before {
        color: #2bc700;
    }

    body.highcontrast .e-customStyle td.vacation span.e-icons.highlight,
    body.highcontrast .e-customStyle td.vacation span.e-icons.highlight:before {
        color: #ff7d1a;
    }

    .e-customStyle .e-other-month span.e-icons.highlight:before {
        content: "";
    }

    .e-customStyle span.e-icons.highlight:before {
        content: "\e865";
        vertical-align: middle;
        margin-right: 3px;
        font-size: 4px;
        position: relative;
        top: -1px;
        font-weight: normal;
    }

    .e-bigger .e-customStyle .e-calendar span.e-icons.highlight:before,
    .e-customStyle.e-bigger .e-calendar span.e-icons.highlight:before {
        top: -3px;
    }

    body.highcontrast.e-bigger .e-customStyle.e-calendar span.e-icons.highlight:before,
    body.highcontrast .e-customStyle.e-bigger.e-calendar span.e-icons.highlight:before,
    body.bootstrap.e-bigger .e-customStyle.e-calendar span.e-icons.highlight:before,
    body.bootstrap .e-customStyle.e-bigger.e-calendar span.e-icons.highlight:before {
        top: 1px;
    }

    .e-customStyle .e-selected span.e-icons.highlight:before {
        color: #fff;
    }

    .e-customStyle span.e-icons.highlight,
    .e-customStyle .e-calendar .e-content span.special,
    .e-customStyle .e-calendar .e-content span.daycell {
        font-weight: bold;
        font-size: 14px;
    }

    .e-customStyle .e-calendar .e-content span.special {
        border-radius: 50%;
    }

    .e-customStyle span.special.e-day.birthday {
        color: orangered;
    }

    .e-customStyle span.special.e-day.farewell {
        color: rgba(0, 0, 255, 1);
    }

    .e-customStyle span.special.e-day.vacation {
        color: rgba(60, 118, 61, 1);
    }
</style>