-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (143 loc) · 8.47 KB
/
index.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Calender using HTML CSS </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="evo-calendar.min.css">
<link rel="stylesheet" href="evo-calendar.midnight-blue.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;1,300&display=swap"
rel="stylesheet">
</head>
<body>
<div class="hero">
<div id="calendar"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="evo-calendar.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').evoCalendar({
theme: "Midnight Blue",
calendarEvents: [
{
id: 'event1', // Event's ID (required)
name: "New Year", // Event name (required)
date: "January/1/2024", // Event date (required)
description: "I wish this year is the finest one but for you because this time closing year you had an high-quality life! You’re worth it!",
type: "holiday", // Event type (required)
everyYear: true // Same event every year (optional)
},
{
id: 'event2',
name: "Valentine's Day",
date: "February/14", // Date range
description: "Celebrate love in all its forms today. Whether it's romantic, familial, or friendship, spread love and kindness to those around you!", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event3',
name: "April Fools' Day ",
date: "April/1", // Date range
description: " It's a day for laughter and harmless pranks! Remember to keep it light-hearted and fun as we celebrate April Fools' Day.", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event4',
name: "International Women's Day",
date: "March/14", // Date range
description: "Today, we honor and celebrate the achievements and contributions of women worldwide. Let's continue to strive for gender equality and empowerment for all.", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event5',
name: "Earth Day",
date: "April/22", // Date range
description: "Let's come together to protect and preserve our planet. Every action, no matter how small, makes a difference in creating a sustainable future for generations to come.", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event6',
name: "Independence Day",
date: "August/15", // Date range
description: "Commemorating the day our nation gained its independence. Let's honor the sacrifices of those who fought for freedom and reflect on the values that unite us.", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event7',
name: "Christmas Day",
date: "December/25", // Date range
description: " Wishing you a day filled with love, joy, and the warmth of family and friends. Merry Christmas!", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event8',
name: "Independence Day",
date: "August/15", // Date range
description: "Commemorating the day our nation gained its independence. Let's honor the sacrifices of those who fought for freedom and reflect on the values that unite us.", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event9',
name: "Halloween",
date: "October/31", // Date range
description: "Though not traditionally celebrated in India, some communities do observe Halloween with costume parties and themed events. It's a time for spooky fun and creativity!", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event10',
name: "Shivaji Jayanti",
date: "February/19", // Date range
description: "Celebrating the birth anniversary of the great Maratha warrior king, Chhatrapati Shivaji Maharaj. Let's honor his legacy of valor, leadership, and dedication to his people. Jai Shivaji!", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event11',
name: "Basant Panchami / Sri Panchami",
date: "February/17", // Date range
description: "Celebrating the arrival of spring and the worship of Goddess Saraswati, the deity of knowledge, wisdom, and arts.", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event12',
name: "Guru Ravidas's Birthday",
date: "February/24", // Date range
description: " Honoring the birth anniversary of Guru Ravidas, a revered saint, poet, and social reformer in the Bhakti movement.", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event13',
name: "Lohri",
date: "January/13", // Date range
description: "Celebrated primarily by the Punjabi community, Lohri marks the end of winter and the onset of longer days. It is celebrated with bonfires, singing, and dancing.", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
},
{
id: 'event14',
name: "Republic Day",
date: "January/26", // Date range
description: "Celebrating the adoption of the Indian Constitution on this day in 1950. It is a national holiday in India, marked by parades, cultural programs, and patriotic fervor.", // Event description (optional)
type: "holiday",
everyYear: true // Same event every year (optional)
}
]
})
})
</script>
</body>
</html>