Home Web Development JavaScript HTML CSS JavaScript Calendar | Animated JQuery Calendar

HTML CSS JavaScript Calendar | Animated JQuery Calendar

May 24, 2019

31056

How to create a real-time calendar for a website? Solution: HTML CSS JavaScript Calendar Program. In other words, Animated JQuery Calendar.

I am sure you had seen the calendar on some website before. Trip and event types of websites use a calendar, for the users can choose their date. I saw that many institute’s websites also use the calendar for giving info to students. Suppose, you run a campaign for a limited offer, then calendar highlight is the best way to attract your customers.

Now question is that how you can create a good UI based calendar? Don’t worry, Because Today I am sharing HTML CSS JavaScript Calendar program. Basically, this is an animated jQuery calendar, because jQuery is a JavaScript library that’s why I am saying this JavaScript program. This calendar has a very good user interface, and also this is an advanced calendar program.

I used two external library jQuery and Font-Awesome in this program. It also has an animation effect when you click on the double angle button. When you click on the angle button, then today’s date, month, and the day will appear. You can call this an animated calendar using jQuery or JavaScript.

If you are thinking now how this program looks like, then see the preview given here below.

Preview Of Animated JQuery Calendar

See this video preview for getting an idea of how this program actually is. How well does it look?

Now you can see this program visually. If you like this, then get the source code of its.

HTML CSS JavaScript Calendar Source Code

As always before sharing source code, Let’s talk something about this program. As you know this is an HTML CSS & JavaScript Calendar program. For creating this program I used jQuery ( a javascript library ) and an external font called font-awesome. To create this program I had mostly used JavaScript var and if statement. Also, CSS play an important part in this program. I used font-awesome to add icons, and I had also used a google font.

The whole HTML structure is table based and created a div for showing current date status. The div show today’s date with an animation effect.

For creating this program, you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to create this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML CSS JavaScript Calender | Webdevtrick.com</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
      <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="main">
  <div class="sideb">
    <div class="header"><i class="fa fa-angle-left" aria-hidden="true"></i><span><span class="month"> </span><span class="year"></span></span><i class="fa fa-angle-right" aria-hidden="true"></i></div>
    <div class="calender">
      <table>
        <thead>
          <tr class="weedays">
            <th data-weekday="sun" data-column="0">Sun</th>
            <th data-weekday="mon" data-column="1">Mon</th>
            <th data-weekday="tue" data-column="2">Tue</th>
            <th data-weekday="wed" data-column="3">Wed</th>
            <th data-weekday="thu" data-column="4">Thu</th>
            <th data-weekday="fri" data-column="5">Fri</th>
            <th data-weekday="sat" data-column="6">Sat</th>
          </tr>
        </thead>
        <tbody>
          <tr class="days" data-row="0">
            <td data-column="0"></td>
            <td data-column="1"></td>
            <td data-column="2"></td>
            <td data-column="3"></td>
            <td data-column="4"></td>
            <td data-column="5"></td>
            <td data-column="6"></td>
          </tr>
          <tr class="days" data-row="1">
            <td data-column="0"></td>
            <td data-column="1"></td>
            <td data-column="2"></td>
            <td data-column="3"></td>
            <td data-column="4"></td>
            <td data-column="5"></td>
            <td data-column="6"></td>
          </tr>
          <tr class="days" data-row="2">
            <td data-column="0"></td>
            <td data-column="1"></td>
            <td data-column="2"></td>
            <td data-column="3"></td>
            <td data-column="4"></td>
            <td data-column="5"></td>
            <td data-column="6"></td>
          </tr>
          <tr class="days" data-row="3">
            <td data-column="0"></td>
            <td data-column="1"></td>
            <td data-column="2"></td>
            <td data-column="3"></td>
            <td data-column="4"></td>
            <td data-column="5"></td>
            <td data-column="6"></td>
          </tr>
          <tr class="days" data-row="4">
            <td data-column="0"></td>
            <td data-column="1"></td>
            <td data-column="2"></td>
            <td data-column="3"></td>
            <td data-column="4"></td>
            <td data-column="5"></td>
            <td data-column="6"></td>
          </tr>
          <tr class="days" data-row="5">
            <td data-column="0"></td>
            <td data-column="1"></td>
            <td data-column="2"></td>
            <td data-column="3"></td>
            <td data-column="4"></td>
            <td data-column="5"></td>
            <td data-column="6"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="showDate"><i class="fa fa-angle-double-right" aria-hidden="true"></i></div>
  </div>
  <div class="right-wrapper">
    <div class="header"><span></span></div><span class="day"></span><span class="month"></span>
  </div>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script  src="function.js"></script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML CSS JavaScript Calender | Webdevtrick.com</title>

</head>

<body>

<table>

<thead>

</tr>

</thead>

<tbody>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap");
body, html {
  width: 100%;
  height: 100%;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #B8F0FF;
  overflow: hidden;
  position: relative;
  outline: none;
  perspective: 1000px;
}

.main {
  position: absolute;
  width: 730px;
  height: 420px;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  transition: all 0.195s ease;
  transform-style: preserve-3d;
}
.main.is-rotated-left {
  transform: translate(-50%, -50%) rotateY(-4deg);
}
.main.is-rotated-right {
  transform: translate(-50%, -50%) rotateY(4deg);
}
.main .sideb,
.main .right-wrapper {
  background-color: white;
  width: 50%;
  float: left;
  height: 100%;
  box-sizing: border-box;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.main .header {
  padding: 15px 0 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.main .header i {
  padding: 0 5px;
  cursor: pointer;
}
.main .header span {
  display: inline-block;
  margin: 0 3px;
  font-weight: 700;
}
.main .right-wrapper {
  background-color: #f05855;
  color: white;
  transform-origin: left center;
  transform: rotateY(110deg);
  transition: all 0.5s;
}
.main .right-wrapper.is-active {
  transform: rotateY(0deg);
}
.main .right-wrapper .header {
  text-align: left;
  justify-content: center;
}
.main .right-wrapper .day {
  font-size: 12em;
  text-indent: -12px;
  display: block;
}
.main .right-wrapper .month {
  font-size: 2.5em;
}
.main .sideb .showDate {
  color: white;
  text-align: right;
  width: 100%;
}
.main .sideb .showDate i {
  cursor: pointer;
  background: #f05855;
  border-radius: 4px;
  padding: 8px 12px;
  transform: scale(1);
  transition: all 0.3s;
}
.main .sideb .showDate i.is-active {
  transform: scale(-1);
}
.main .sideb table {
  text-align: center;

  width: 90%;
  margin: 30px auto 0;
  table-layout: fixed;
  border-collapse: collapse;
}
.main .sideb table tbody:before {
  content: "-";
  display: block;
  line-height: 0.75em;
  color: transparent;
}
.main .sideb table th {
  color: #f05855;
  font-size: 0.75em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.main .sideb table td {
  padding: 11px 5px;
  color: #ced0ce;
  font-size: 0.75em;
  transition: all 0.3s;
  position: relative;
}
.main .sideb table td::before {
  content: "";
  display: none;
  width: 50%;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -8px);
  background-color: #f05855;
}
.main .sideb table td.currentDay::before {
  display: block;
}
.main .sideb table td.selectable {
  color: #303633;
  cursor: pointer;
}
.main .sideb table td.selectable:hover {
  background: #f05855;
  color: white;
}
.main .sideb table td.between {
  background-color: #333;
  color: white;
}
.main .sideb table td.active, .main .sideb table td.hover {
  background: #f05855;
  color: white;
}

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

/** code by webdevtrick ( https://webdevtrick.com ) **/

@import url("https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap");

body, html {

width: 100%;

height: 100%;

font-family: 'Josefin Sans', sans-serif;

background-color: #B8F0FF;

overflow: hidden;

position: relative;

outline: none;

perspective: 1000px;

}

.main {

position: absolute;

width: 730px;

height: 420px;

top: 50%;

left: 50%;

box-sizing: border-box;

transform: translate(-50%, -50%);

transition: all 0.195s ease;

transform-style: preserve-3d;

}

.main.is-rotated-left {

transform: translate(-50%, -50%) rotateY(-4deg);

}

.main.is-rotated-right {

transform: translate(-50%, -50%) rotateY(4deg);

}

.main .sideb,

.main .right-wrapper {

background-color: white;

width: 50%;

float: left;

height: 100%;

box-sizing: border-box;

padding: 25px;

display: flex;

flex-direction: column;

justify-content: flex-start;

align-items: center;

}

.main .header {

padding: 15px 0 20px;

display: flex;

justify-content: space-between;

width: 100%;

}

.main .header i {

padding: 0 5px;

cursor: pointer;

}

.main .header span {

display: inline-block;

margin: 0 3px;

font-weight: 700;

}

.main .right-wrapper {

background-color: #f05855;

color: white;

transform-origin: left center;

transform: rotateY(110deg);

transition: all 0.5s;

}

.main .right-wrapper.is-active {

transform: rotateY(0deg);

}

.main .right-wrapper .header {

text-align: left;

justify-content: center;

}

.main .right-wrapper .day {

font-size: 12em;

text-indent: -12px;

display: block;

}

.main .right-wrapper .month {

font-size: 2.5em;

}

.main .sideb .showDate {

color: white;

text-align: right;

width: 100%;

}

.main .sideb .showDate i {

cursor: pointer;

background: #f05855;

border-radius: 4px;

padding: 8px 12px;

transform: scale(1);

transition: all 0.3s;

}

.main .sideb .showDate i.is-active {

transform: scale(-1);

}

.main .sideb table {

text-align: center;

width: 90%;

margin: 30px auto 0;

table-layout: fixed;

border-collapse: collapse;

}

.main .sideb table tbody:before {

content: "-";

display: block;

line-height: 0.75em;

color: transparent;

}

.main .sideb table th {

color: #f05855;

font-size: 0.75em;

text-transform: uppercase;

margin-bottom: 10px;

}

.main .sideb table td {

padding: 11px 5px;

color: #ced0ce;

font-size: 0.75em;

transition: all 0.3s;

position: relative;

}

.main .sideb table td::before {

content: "";

display: none;

width: 50%;

height: 2px;

position: absolute;

left: 50%;

top: 100%;

transform: translate(-50%, -8px);

background-color: #f05855;

}

.main .sideb table td.currentDay::before {

display: block;

}

.main .sideb table td.selectable {

color: #303633;

cursor: pointer;

}

.main .sideb table td.selectable:hover {

background: #f05855;

color: white;

}

.main .sideb table td.between {

background-color: #333;

color: white;

}

.main .sideb table td.active, .main .sideb table td.hover {

background: #f05855;

color: white;

}

function.js

The final step, Create a JS file named ‘function.js‘ and put the codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
var month = [
	"January",
	"February",
	"March",
	"April",
	"May",
	"June",
	"July",
	"August",
	"September",
	"October",
	"November",
	"December"
];
var weekday = [
	"Sunday",
	"Monday",
	"Tuesday",
	"Wednesday",
	"Thursday",
	"Friday",
	"Saturday"
];
var weekdayShort = [
	"sun",
	"mon",
	"tue",
	"wed",
	"thu",
	"fri",
	"sat"
];
var monthDirection = 0;

function getNextMonth() {
	monthDirection++;
	var current;
	var now = new Date();
	if (now.getMonth() == 11) {
		current = new Date(now.getFullYear() + monthDirection, 0, 1);
	} else {
		current = new Date(now.getFullYear(), now.getMonth() + monthDirection, 1);
	}
	initCalender(getMonth(current));
}

function getPrevMonth() {
	monthDirection--;
	var current;
	var now = new Date();
	if (now.getMonth() == 11) {
		current = new Date(now.getFullYear() + monthDirection, 0, 1);
	} else {
		current = new Date(now.getFullYear(), now.getMonth() + monthDirection, 1);
	}
	initCalender(getMonth(current));
}
Date.prototype.isSameDateAs = function (pDate) {
	return (
		this.getFullYear() === pDate.getFullYear() &&
		this.getMonth() === pDate.getMonth() &&
		this.getDate() === pDate.getDate()
	);
};

function getMonth(currentDay) {
	var now = new Date();
	var currentMonth = month[currentDay.getMonth()];
	var monthArr = [];
	for (i = 1 - currentDay.getDate(); i < 31; i++) {
		var tomorrow = new Date(currentDay);
		tomorrow.setDate(currentDay.getDate() + i);
		if (currentMonth !== month[tomorrow.getMonth()]) {
			break;
		} else {
			monthArr.push({
				date: {
					weekday: weekday[tomorrow.getDay()],
					weekday_short: weekdayShort[tomorrow.getDay()],
					day: tomorrow.getDate(),
					month: month[tomorrow.getMonth()],
					year: tomorrow.getFullYear(),
					current_day: now.isSameDateAs(tomorrow) ? true : false,
					date_info: tomorrow
				}
			});
		}
	}
	return monthArr;
}

function clearCalender() {
	$("table tbody tr").each(function () {
		$(this).find("td").removeClass("active selectable currentDay between hover").html("");
	});
	$("td").each(function () {
		$(this).unbind('mouseenter').unbind('mouseleave');
	});
	$("td").each(function () {
		$(this).unbind('click');
	});
	clickCounter = 0;
}

function initCalender(monthData) {
	var row = 0;
	var classToAdd = "";
	var currentDay = "";
	var today = new Date();

	clearCalender();
	$.each(monthData,
		function (i, value) {
			var weekday = value.date.weekday_short;
			var day = value.date.day;
			var column = 0;
			var index = i + 1;

			$(".sideb .header .month").html(value.date.month);
			$(".sideb .header .year").html(value.date.year);
			if (value.date.current_day) {
				currentDay = "currentDay";
        classToAdd = "selectable";
				$(".right-wrapper .header span").html(value.date.weekday);
				$(".right-wrapper .day").html(value.date.day);
				$(".right-wrapper .month").html(value.date.month);
			}
			if (today.getTime() < value.date.date_info.getTime()) {
				classToAdd = "selectable";

			}
			$("tr.weedays th").each(function () {
				var row = $(this);
				if (row.data("weekday") === weekday) {
					column = row.data("column");
					return;
				}
			});
			$($($($("tr.days").get(row)).find("td").get(column)).addClass(classToAdd + " " + currentDay).html(day));
			currentDay = "";
			if (column == 6) {
				row++;
			}
		});
	$("td.selectable").click(function () {
		dateClickHandler($(this));
	});
}
initCalender(getMonth(new Date()));

var clickCounter = 0;
$(".fa-angle-double-right").click(function () {
	$(".right-wrapper").toggleClass("is-active");
	$(this).toggleClass("is-active");
});

function dateClickHandler(elem) {

	var day1 = parseInt($(elem).html());
	if (clickCounter === 0) {
		$("td.selectable").each(function () {
			$(this).removeClass("active between hover");
		});
	}
	clickCounter++;
	if (clickCounter === 2) {
		$("td.selectable").each(function () {
			$(this).unbind('mouseenter').unbind('mouseleave');
		});
		clickCounter = 0;
		return;
	}
	$(elem).toggleClass("active");
	$("td.selectable").hover(function () {

		var day2 = parseInt($(this).html());
		$(this).addClass("hover");
		$("td.selectable").each(function () {
			$(this).removeClass("between");

		});
		if (day1 > day2 + 1) {
			$("td.selectable").each(function () {
				var dayBetween = parseInt($(this).html());
				if (dayBetween > day2 && dayBetween < day1) {
					$(this).addClass("between");
				}
			});
		} else if (day1 < day2 + 1) {
			$("td.selectable").each(function () {
				var dayBetween = parseInt($(this).html());
				if (dayBetween > day1 && dayBetween < day2) {
					$(this).addClass("between");
				}
			});
		}
	}, function () {
		$(this).removeClass("hover");
	});
}
$(".fa-angle-left").click(function () {
	getPrevMonth();
	$(".main").addClass("is-rotated-left");
	setTimeout(function () {
		$(".main").removeClass("is-rotated-left");
	}, 195);
});

$(".fa-angle-right").click(function () {
	getNextMonth();
	$(".main").addClass("is-rotated-right");
	setTimeout(function () {
		$(".main").removeClass("is-rotated-right");
	}, 195);
});

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

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

/** code by webdevtrick ( https://webdevtrick.com ) **/

var month = [

"January",

"February",

"March",

"April",

"May",

"June",

"July",

"August",

"September",

"October",

"November",

"December"

];

var weekday = [

"Sunday",

"Monday",

"Tuesday",

"Wednesday",

"Thursday",

"Friday",

"Saturday"

];

var weekdayShort = [

"sun",

"mon",

"tue",

"wed",

"thu",

"fri",

"sat"

];

var monthDirection = 0;

function getNextMonth() {

monthDirection++;

var current;

var now = new Date();

if (now.getMonth() == 11) {

current = new Date(now.getFullYear() + monthDirection, 0, 1);

} else {

current = new Date(now.getFullYear(), now.getMonth() + monthDirection, 1);

}

initCalender(getMonth(current));

}

function getPrevMonth() {

monthDirection--;

var current;

var now = new Date();

if (now.getMonth() == 11) {

current = new Date(now.getFullYear() + monthDirection, 0, 1);

} else {

current = new Date(now.getFullYear(), now.getMonth() + monthDirection, 1);

}

initCalender(getMonth(current));

}

Date.prototype.isSameDateAs = function (pDate) {

return (

this.getFullYear() === pDate.getFullYear() &&

this.getMonth() === pDate.getMonth() &&

this.getDate() === pDate.getDate()

);

};

function getMonth(currentDay) {

var now = new Date();

var currentMonth = month[currentDay.getMonth()];

var monthArr = [];

for (i = 1 - currentDay.getDate(); i < 31; i++) {

var tomorrow = new Date(currentDay);

tomorrow.setDate(currentDay.getDate() + i);

if (currentMonth !== month[tomorrow.getMonth()]) {

break;

} else {

monthArr.push({

date: {

weekday: weekday[tomorrow.getDay()],

weekday_short: weekdayShort[tomorrow.getDay()],

day: tomorrow.getDate(),

month: month[tomorrow.getMonth()],

year: tomorrow.getFullYear(),

current_day: now.isSameDateAs(tomorrow) ? true : false,

date_info: tomorrow

}

});

}

return monthArr;

}

function clearCalender() {

$("table tbody tr").each(function () {

$(this).find("td").removeClass("active selectable currentDay between hover").html("");

});

$("td").each(function () {

$(this).unbind('mouseenter').unbind('mouseleave');

});

$("td").each(function () {

$(this).unbind('click');

});

clickCounter = 0;

}

function initCalender(monthData) {

var row = 0;

var classToAdd = "";

var currentDay = "";

var today = new Date();

clearCalender();

$.each(monthData,

function (i, value) {

var weekday = value.date.weekday_short;

var day = value.date.day;

var column = 0;

var index = i + 1;

$(".sideb .header .month").html(value.date.month);

$(".sideb .header .year").html(value.date.year);

if (value.date.current_day) {

currentDay = "currentDay";

classToAdd = "selectable";

$(".right-wrapper .header span").html(value.date.weekday);

$(".right-wrapper .day").html(value.date.day);

$(".right-wrapper .month").html(value.date.month);

}

if (today.getTime() < value.date.date_info.getTime()) {

classToAdd = "selectable";

}

$("tr.weedays th").each(function () {

var row = $(this);

if (row.data("weekday") === weekday) {

column = row.data("column");

return;

}

});

$($($($("tr.days").get(row)).find("td").get(column)).addClass(classToAdd + " " + currentDay).html(day));

currentDay = "";

if (column == 6) {

row++;

}

});

$("td.selectable").click(function () {

dateClickHandler($(this));

});

}

initCalender(getMonth(new Date()));

var clickCounter = 0;

$(".fa-angle-double-right").click(function () {

$(".right-wrapper").toggleClass("is-active");

$(this).toggleClass("is-active");

});

function dateClickHandler(elem) {

var day1 = parseInt($(elem).html());

if (clickCounter === 0) {

$("td.selectable").each(function () {

$(this).removeClass("active between hover");

});

}

clickCounter++;

if (clickCounter === 2) {

$("td.selectable").each(function () {

$(this).unbind('mouseenter').unbind('mouseleave');

});

clickCounter = 0;

return;

}

$(elem).toggleClass("active");

$("td.selectable").hover(function () {

var day2 = parseInt($(this).html());

$(this).addClass("hover");

$("td.selectable").each(function () {

$(this).removeClass("between");

});

if (day1 > day2 + 1) {

$("td.selectable").each(function () {

var dayBetween = parseInt($(this).html());

if (dayBetween > day2 && dayBetween < day1) {

$(this).addClass("between");

}

});

} else if (day1 < day2 + 1) {

$("td.selectable").each(function () {

var dayBetween = parseInt($(this).html());

if (dayBetween > day1 && dayBetween < day2) {

$(this).addClass("between");

}

});

}

}, function () {

$(this).removeClass("hover");

});

}

$(".fa-angle-left").click(function () {

getPrevMonth();

$(".main").addClass("is-rotated-left");

setTimeout(function () {

$(".main").removeClass("is-rotated-left");

}, 195);

});

$(".fa-angle-right").click(function () {

getNextMonth();

$(".main").addClass("is-rotated-right");

setTimeout(function () {

$(".main").removeClass("is-rotated-right");

}, 195);

});

That’s It. Now you have successfully created an HTML CSS JavaScript Calendar Program or an Animated jQuery Calendar. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

7 COMMENTS

Aravinda May 26, 2019 At 7:56 am

Hi Shaan, thanks for sharing this calendar.
I’ve requirement that, i’ve To get a date from some website, which I need to use in my website.
Can u plz help me in on this, if u want me to pay for ur help , i’ll Pay.
For more details please contact me on dussani.aravind@outlook.com
+918333012316

Reply
- shaan May 26, 2019 At 8:39 am
  
  Comment here what you need? I mean which program.
  I will contact you soon.
  
  Reply
  - Aravind October 13, 2019 At 8:18 pm
    
    Can you please contact me on my mobile +918333012316
    Or mail
    dussani.aravind@outlook.com
    
    Reply
BALA KUMAR S June 5, 2019 At 7:50 pm

how to make it select the dates from this month to next month. Btw, it’s awesome bro.

Reply
- shaan June 6, 2019 At 1:57 am
  
  You mean datepicker? I will post soon.
  
  Reply
Olivier September 18, 2019 At 7:20 pm

Hello,

How can you add class to td with it’s date yy/mm/dd ?

Thanks

Reply
Advaith December 17, 2020 At 12:23 pm

best the first website i made and it came so good
nice job

Reply