سورس تقویم فارسی 1403 به همراه مناسبت ها با جاوا اسکریپت [ بروزرسانی سوم ]

سورس تقویم فارسی به همراه مناسبت – در این مقاله یک تقویم حرفه ای را خواهیم ساخت که قابلیت نمایش مناسبت ها علاوه بر شمسی ( میلادی و قمری ) ، تاریخ شمسی ، قمری ، میلادی ، نمایش روز های تعطیل ، ماه های عربی ، میلادی را خواهد داشت .

علاوه بر آن به 4 رنگ کلی برای تم تقویم با توجه به فصل فعلی که به طور خودکار عوض می شود .

تقویم سال 1403 اضافه گردید
تقویم سال 1402 اضافه گردید

دموی تقویم فارسی

فایل index.html

  
  
  


  

    رپید کد • کتابخانه مجازی برنامه نویسان
    

      

 
        

        
 
        

          فروردین
          اردیبهشت
          خرداد
          تیر
          مرداد
          شهریور
          مهر
          آبان
          آذر
          دی
          بهمن
          اسفند
        
        

 
        

          

            
شنبه
            
یکشنبه
            
دوشنبه
            
سه شنبه
            
چهارشنبه
            
پنجشنبه
            
جمعه
            

          
        
 
        

 
      
 
      

 
        
X
        
X
 
      
    
    

 
  
 
  
  

 

main.css برای نمایش بهتر برنامه

.container{
    margin: 0 auto;
    width: 80%;
    text-align: center;
    direction: rtl;
}

#introduce{
    display: block;
    width: 100%;
    font-size: 35px;
    font-weight: bold;
    color: white;
    padding-bottom: 5px;
    background-color: #4CAF50;
    text-decoration: none;
    margin-bottom: 15px;
}


/* Page Style */

@font-face{font-family:Shabnam;src: url(../font/Shabnam.ttf) format("truetype");font-weight:400}

body {
  background-color: lightgray;
  font-family: 'Shabnam';
  margin: 0;
}

.dynamic-element{
	display: none;
}

.active-element{
	display: block;
}

.calendar-wrapper{
	text-align: left;
	direction: ltr;
	float: right;
}

.clearfix, .clearfix::before, .clearfix::after{
	clear: both;
	content: "";
	display:black;
}

.calendar-base {
  width: 900px;
  height: 570px;
  border-radius: 20px;
  background-color: white;
  position: relative;
  z-index: 1;
  color: black;
  overflow: hidden;
}

.active-season{
	background-color: #d3cccc !important;
	color:white !important;
}

.active-season-bg{
	background-color: #d3cccc !important;
}

.active-season-cr{
	color: #d3cccc !important;
}

.month-hover.active-season-cr{
	font-weight: bold;
}

.holiday{
	background-color: #f44336;
	color:#fff !important;
}

.holiday:hover{
	background-color: #d3cccc !important;
}

.disable-one{
	opacity: 0.3;
}

.year {
  color: #d3cccc;
  font-size: 30px;
  float: right;
  position: relative;
  right: 45px;
  top: 30px;
  font-weight: bold;
}

.year-meta{
	position: absolute;
	left: 335px;
	top: 25px;
	color: #d3cccc;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 10px solid #E8E8E8;
  border-bottom: 5px solid transparent;
  float: right;
  position: relative;
  right: 90px;
  top: 36px;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #E8E8E8;
  border-bottom: 5px solid transparent;
  float: right;
  position: relative;
  left: 20px;
  top: 36px;
}
.triangle-left:hover{
  border-right: 10px solid#2ECC71;
}
.triangle-right:hover{
  border-left: 10px solid#2ECC71;
}

.month-color {
  color: #27AE60;
}
.month-hover:hover{
  cursor: pointer;
  color: #d3cccc !important;
}

.months {
  color: #6b6b6b;
  position: relative;
  left: 340px;
  top: 90px;
  word-spacing: 5px;
}

.month-line {
  border-color: #E8E8E8;
  position: relative;
  top: 85px;
  width: 57%;
  left: 178px;
}

.days {
  color: #6b6b6b;
  position: relative;
  font-size: 18px;
  left: 14px;
  top: 80px;
  word-spacing: 35px;
  font-weight: 600;
}

.days ul{
	margin: 0;
}

.days ul li{
  background-color: transparent !important;
  height: auto !important;
  word-spacing: -4px;
  font-size: 16px;
}

.num-dates {
   float: right;
   position: relative;
   top: 90px;
   right: 44px;
   z-index: 1;
}

.num-dates ul{
	margin: 0 0 20px 0;
	padding: 0;
}

.num-dates ul li, .days ul li{
	float: right;
    list-style: none;
    text-align: center;
    margin-left: 11px;
    width: 64px;
	font-weight: bold;
}

.num-dates ul li{
	padding: 10px 0;
	cursor: pointer;
	font-size: 22px;
	border-radius: 9px;
	position: relative;
	box-shadow: 0 0 35px #e5e3e3;
	color: #6b6b6b;
}

.num-dates ul li:hover{
	background-color: #d3cccc;
	color: white;
}

.num-dates ul li small{
	position: absolute;
	font-size: 12px;
    font-weight: normal;
	bottom: 2px;
}

.num-dates ul li small#miladi{
    right: 7px;
}

.num-dates ul li small#ghamari{
    left: 7px;
}

.active-day {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #2ECC71;
  position: relative;
  top: 295px;
  left: 661px;
}

.white {
  color: white;
}

.event-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #2980B9;
  position: relative;
  top: 304px;
  left: 695px;
}

.two {
  position: relative;
  top: 168px;
  left: 535px;
}

.grey {
  color: #AAAAB1;
}

.calendar-left {
  width: 300px;
  height: 570px;
  border-radius: 20px 0px 0px 20px;
  background-color: #2ECC71;
  position: relative;
  z-index: 1;
  bottom: 570px;
  color: white;
}

.hamburger {
  position: relative;
  top: 25px;
  left: 25px;
}

.burger-line:hover, .hamburger:hover{
  background-color:#27e879 !important;
}

.burger-line {
  width: 25px;
  height: 3px;
  background-color: white;
  border-radius: 15%;
  margin-bottom: 3px;
}

.num-date {
  font-size: 150px;
  width: 50%;
  margin: 0 auto;
  font-weight: 700;
  position: relative;
  top: -20px;
}

.day {
  width: 50%;
  margin: 0px auto;
  font-size: 30px;
  position: relative;
  bottom: 77px;
  text-align: center;
}

.current-events {
  font-size: 15px;
  position: relative;
  margin-left: 25px;
  bottom: 30px;
}

.posts {
  text-decoration: underline dotted;
}
.posts:hover{
  color:#27e879 !important;
}

.events-list{
	direction: rtl;
	float: right;
	position: relative;
    top: -83px;
    width: 93%;
	height: 377px;
    overflow-y: scroll;
    padding-right: 8px;
    text-align: right;
}

.events-list li{
	margin-bottom: 6px;
	font-size: 14px;
}

.events-list li span.event-day{
	font-weight: bold;
}

.events-list li div.event-title{
	display: inline-block;
	margin-left: 3px;
}

فایل app.js جهت کنترل بر رفتار برنامه

String.prototype.getBaseConversionNumber = getBaseConversionNumber
String.prototype.CvnFromTo = CvnFromTo;
String.prototype.convertDigits = convertDigits;


var today = Date.now();
const todayFa = {
	"day": getDateFormat(today, {
		"day": "2-digit"
	}),
	"month": getDateFormat(today, {
		"month": "numeric"
	}),
	"monthTitle": getDateFormat(today, {
		"month": "long"
	}),
	"year": getDateFormat(today, {
		"year": "numeric"
	}),
	"dayWeek": getDateFormat(today, {
		"weekday": "long"
	}),
}


// index month to label
const monthLabel = [
	"فروردین",
	"اردیبهشت",
	"خرداد",
	"تیر",
	"مرداد",
	"شهریور",
	"مهر",
	"آبان",
	"آذر",
	"دی",
	"بهمن",
	"اسفند",
];


const headDOM = document.getElementsByTagName("head")[0];

const parentDateDOM = document.getElementsByClassName('num-dates')[0];
const parentMetaYearDOM = document.getElementsByClassName('year-wrapper')[0];
const parentEventsDOM = document.getElementsByClassName('calendar-left')[0];

const todayDateDOM = document.getElementsByClassName("num-date")[0];
const todayDayDOM = document.getElementsByClassName("day")[0];

// set Property
todayDateDOM.textContent = todayFa['day'].convertDigits("fa");
todayDayDOM.textContent = todayFa['dayWeek'].convertDigits("fa");

// event listener
const monthLetter = document.getElementsByClassName("month-letter");
for (const element of monthLetter) {
	element.onclick = function (e) {
		const thisElement = e.target;
		if (thisElement.classList.contains("active-season-cr")) return;
		
		const monthDataNumber = thisElement.getAttribute("data-num");
		activeMonthElement('dynamic-element', `dynamic-element-${monthDataNumber}`, 'active-element');
		activeMonthElement('month-letter', `month-letter-${monthDataNumber}`, 'active-season-cr');
	}
}

let season = getSeasonByMonNum(todayFa.month);
let cssSeason = getCssBySeason(season);

let styleCustom = document.getElementById("style-cln");

if (!styleCustom)
	headDOM.innerHTML += `<style id="style-cln">${cssSeason}</style>`;
else {
	styleCustom.innerHTML = cssSeason;
}


let monthCounter = 1;
for (const month of calendarObject) {

	const dateList = [];
	let liCounter = 0;
	let UlCounter = 1;
	let oneStarted = false;
	let tmpMetaYear = metaYear.metaYear[monthCounter - 1];
	tmpMetaYear = tmpMetaYear.split(" | ");

	parentMetaYearDOM.innerHTML += generateTemplateHTML("metaYear", {
		index: monthCounter,
		year: metaYear.year,
		arabic: tmpMetaYear[1],
		miladi: tmpMetaYear[0],
	});

	for (const day of month) {
		
		const currentMonth = monthLabel[monthCounter-1];
	
		
		if (day[5])
			oneStarted = false;
		else {
			oneStarted = true;
			dateList.push(day[0]);
		}
		var ulCurrentClass = `wk-${monthCounter}-${UlCounter}`;

		if (liCounter == 7) {
			document.getElementsByClassName(ulCurrentClass)[0].innerHTML += "<div class=\"clearfix\"></div>";
			liCounter = 0;
			UlCounter++;
		}

		ulCurrentClass = `wk-${monthCounter}-${UlCounter}`;

		var ulCurrent = document.getElementsByClassName(ulCurrentClass)[0];

		if (!ulCurrent) {
			var htmlUL = '';
			htmlUL += `<ul class="week ${ulCurrentClass} month-${monthCounter} dynamic-element dynamic-element-${monthCounter}"></ul>`;
			parentDateDOM.innerHTML += htmlUL;
			ulCurrent = document.getElementsByClassName(ulCurrentClass)[0];
		}
		let liClass = "day-element ";

		if (!oneStarted)
			liClass += "disable-one ";
		else if (oneStarted)
			liClass += `date-${monthCounter}-${day[0].convertDigits("en")} `;

		if (day[3] === true)
			liClass += "holiday ";

		ulCurrent.innerHTML += generateTemplateHTML('date', {
			class: liClass,
			jalali: day[0].toString().convertDigits("fa"),
			miladi: day[1],
			ghamari: day[2].toString().convertDigits("ar"),
		});

		const eventClass = `event-list-${monthCounter}`;
		let eventDOM = document.getElementsByClassName(eventClass)[0];
		if (!eventDOM) {
			parentEventsDOM.innerHTML += `<ul class="events-list event-list-${monthCounter} dynamic-element dynamic-element-${monthCounter}"></ul>`;
			eventDOM = document.getElementsByClassName(eventClass)[0];
		}

		for (const dayElement of day[4]) {
			const indexBracket = dayElement.indexOf("[");
			const eventdate = (0 <= indexBracket) ? dayElement.substring(indexBracket) : "";
			const eventTitle = dayElement.replace(eventdate, "");
			const startedDate = dateList[dateList.length - 1];

			if (oneStarted) {
				eventDOM.innerHTML += generateTemplateHTML('events', {
					day: `${startedDate} ${currentMonth}`.convertDigits("fa"),
					eventTitle: eventTitle,
					date: eventdate,
				});
			}
		}




		liCounter++;

	}

	monthCounter++;
}



activeMonthElement('dynamic-element', `dynamic-element-${todayFa.month}`, 'active-element');
activeMonthElement('month-letter', `month-letter-${todayFa.month}`, 'active-season-cr');
activeMonthElement('day-element', `date-${todayFa.month}-${parseInt(todayFa.day)}`, 'active-season');

function getSeasonByMonNum(numMonth) {
	const monthSeason = [
		"spring",
		"summer",
		"fall",
		"winter",
	];

	let season = "";

	if (numMonth <= 3) {
		season = monthSeason[0];
	} else if (3 < numMonth && numMonth <= 6) {
		season = monthSeason[1];
	} else if (6 < numMonth && numMonth <= 9) {
		season = monthSeason[2];
	} else if (9 < numMonth && numMonth <= 12) {
		season = monthSeason[3];
	}

	return season;
}

function getCssBySeason(season) {
	const cssObjects = cssProperty[season];
	let cssString = "";
	for (const cssObject of cssObjects) {
		let template = `${cssObject['selector']}{\n`;
		for (const property of cssObject['property']) {
			template += `${property}\n`;
		}
		template += "}\n\n"
		cssString += template;
	}

	return cssString;
}

function getDateFormat(uDate, option) {
	let date = new Intl.DateTimeFormat('fa-IR', option).format(uDate);
	date = date.convertDigits("en");
	return date;
}

function activeMonthElement(allCls, whichCls, activeCls) {
	const dynamicElement = document.getElementsByClassName(allCls);
	for (const element of dynamicElement) {
		if (element.classList.contains(activeCls))
			element.classList.remove(activeCls);
		else if (element.classList.contains(whichCls))
			element.classList.add(activeCls);
	}
}

function generateTemplateHTML(type, data) {
	let htmlTemplate = '';

	if (type == "date")
		htmlTemplate = `<li class="${data.class}"><span id="jalali">${data.jalali}</span><small id="miladi">${data.miladi}</small><small id="ghamari">${data.ghamari}</small></li>`;
	else if (type == "metaYear") {
		htmlTemplate = `<div class="year yr-${data.index} dynamic-element dynamic-element-${monthCounter}">${data.year}</div> <div class="year-meta myr-${data.index} dynamic-element dynamic-element-${monthCounter}">${data.arabic}<br>${data.miladi}</div>`;
	} else if (type == "events") {
		htmlTemplate = `<li><span class="event-day">${data.day} </span><div class="event-title">${data.eventTitle}</div><span class="event-date-type"> ${data.date}</span></li>`;
	}
	return htmlTemplate;
}

function convertDigits(to) {
	let str = this;
	const toCvn = (this.getBaseConversionNumber(to))[to];
	const allDigits = this.getBaseConversionNumber("all");

	delete allDigits[to];

	const Objkeys = Object.keys(allDigits);
	for (var i = 0; i < Objkeys.length; i++) {
		const currentKey = Objkeys[i];
		const fromCvn = allDigits[currentKey];
		str = this.CvnFromTo(fromCvn, toCvn, str)
	}
	return str;
}

function CvnFromTo(fromDigits, toDigits, str) {
	var str = str == undefined ? this : str;
	for (var i = 0; i < toDigits.length; i++) {
		const currentFromDigit = fromDigits[i];
		const currentToDigit = toDigits[i];
		const regex = new RegExp(currentFromDigit, 'g');
		str = str.replace(regex, currentToDigit);
	}
	return str;
}

function getBaseConversionNumber(label) {
	const faDigits = ['۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹', '۰'];
	const enDigits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
	const arDigits = ['١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩', '٠'];

	var whichDigit = {};

	switch (label) {
		case 'fa':
			whichDigit[label] = faDigits;
			break;
		case 'en':
			whichDigit[label] = enDigits;
			break;
		case 'ar':
			whichDigit[label] = arDigits;
			break;
		case 'all':
			whichDigit = {
				"fa": faDigits,
				"en": enDigits,
				"ar": arDigits
			};
			break;
		default:
			whichDigit = [];
	}

	return whichDigit;
}

window.onkeyup = function(e){
	const keyName = e.code;
	let action = null;
	
	if(keyName == "ArrowLeft"){
		action = "DECREASE";
	}else if(keyName == "ArrowRight"){
		action = "INCREASE";
	}else{
		return;
	}
	
	const activeMonthDOM = document.getElementsByClassName("active-season-cr")[0];
	const numberMonth = activeMonthDOM.getAttribute("data-num");
	
	let numberMonthFinal = 0;
	
	if(action == "INCREASE"){
		numberMonthFinal = parseInt(numberMonth) + 1;
	}else if(action == "DECREASE"){
		numberMonthFinal = parseInt(numberMonth) - 1;	
	}
	
	if(numberMonthFinal == 0 || numberMonthFinal == 13){
		numberMonthFinal = 1;
	}
	
	console.log(numberMonthFinal)
	
	const newMonthDOM = document.getElementsByClassName("month-letter")[(numberMonthFinal-1)];
	
	const eventClick = new Event("click");
	
	newMonthDOM.dispatchEvent(eventClick);
}

همچنین علاوه بر فایل های بالا فایل فونت و calendarObject.js هم نیز وجود دارد که داخل سورس قرار داده شده است که در پایین مقاله قابل دانلود است .

دانلود سورس تقویم فارسی سال 1403 به همراه مناسبت ها

دانلود سورس تقویم فارسی سال 1402 به همراه مناسبت ها

دانلود تقویم سال 1401 به همراه مناسبت ها