Calender Update

Developer
Ajala Comfort
Size
6,157 Kb
Views
8,096
  1. Calender Update Previews
  2. Calender Update HTML Codes
  3. Calender Update CSS Codes
  4. Calender Update JS Codes

How do I make an calender update?

What is a calender update? How do you make a calender update? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.

Calender Update Previews
IQ Test

Calender Update - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calender Update</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="space"></div>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Calender Update - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Roboto:100,400,500,700';
body{margin:0;padding:0;width:100%;}
#space{width:500px;height:500px;margin:auto;margin-top:100px;font-family: 'Roboto', sans-serif}
#space > div{width:100%;}
#space > div > p{text-align:center;color:#e74c3c;font-size:25px;}
#space > div > div{width:13.6%;float:left;height:100%;min-height:300px;}
#space > div > div > ul{list-style:none;width:100%;padding:0;}
#space > div > div li, #space > div > div p{text-align:center;}
#space > div > div li{width:100%;height:45px;padding-top:25px;}
#space > div > div p{padding-bottom:20px;color:gray;border-bottom:2px dashed #3498db;width:50%;margin:auto;}
.dates{cursor:pointer;}
.overflow{color:gray;cursor:not-allowed}
#today{background:#e74c3c;color:white;}

Calender Update - Script Codes JS Codes

"use strict";
/****************************************THE MATH ********************************/
//get year,month,numberofdays
//get Date: The current date - correct
//get Day : The day (Sunday- Sat) 0 -7
//get Month: The month ( Jan - Dec) 0-11
//getFullYear: gets current Year - correct
//number of days in month = new Date(currentYear,currentMonth,0).getDate(),
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function getDateData() { var shift = 0; //here you can determine which month: 0 is current; +1 is past; -1 is future var thisMonth = new Date(); var NumberOfDays = new Date(thisMonth.getFullYear(), thisMonth.getMonth() - shift + 1, 0).getDate(); return { month: thisMonth.getMonth() - shift, year: thisMonth.getFullYear(), numberofdays: NumberOfDays, today: thisMonth.getDate(), currentMonth: thisMonth.getMonth(), shift: shift };
}
var Data = getDateData();
var dates = {};
function getFullDates(repetition) { //check if day is in dates //get the "day" of the date provided in the repetition variable based on the year and current month var day = new Date(Data.year, Data.month, repetition).getDay(); //get the day in "word" day = days[day]; //chek if the day dates object has the "day" as a key; if true push the date into the key else create a new object with the day as the key and an array with the first variable as the date if (day in dates) { dates[day].push(repetition); } else { dates[day] = [repetition]; } // increment repetition; Note the first date is 1 repetition = repetition + 1; //if the date is greater the number of days calculated above, stop this function and return the dates array return repetition > Data.numberofdays ? dates : getFullDates(repetition);
}
dates = getFullDates(1);
//this function generates the dates from the past month and the next month which should fill the empty spaces on the calender; however these dates are inactive
function getCarryOver() { //get the day of the first day of the current/pointed month; var from_start_day = new Date(Data.year, Data.month, 1).getDay(), past = {}, future = {}; //check if he day starts with Sunda; if not create the past dates object if (from_start_day > 0) { //determine the number of dates to add to the calender from the past month // var reps = new Date(Data.year, Data.month, 0).getDate(); //number of days var start_date = reps - from_start_day + 1; past = fromStart(reps, start_date); } //store the last day of the pointed month var till_end = new Date(Data.year, Data.month, Data.numberofdays).getDay(); //check if the last day is Saturday if (till_end != 6) { //if it is not; DETERMINE the number of dates till saturday of the following month eEXCLUDING the last day of the current month till_end = 6 - till_end; //get the future dates future = tillEnd(till_end); } return submit(past, future, dates);
}
var pastLeftOver = {}, futureMonth = {};
function fromStart(rep, date) { //repeat "rep" times and access day in days array--> update dates object for this do not push instead unshift var day = new Date(Data.year, Data.month - 1, date).getDay(); pastLeftOver[days[day]] = date + ""; date++; return date > rep ? pastLeftOver : fromStart(rep, date);
}
function tillEnd(reps) { //store day of the dates provided in variable reps in the next month var day = new Date(Data.year, Data.month + 1, reps).getDay(); //store the day in the future object futureMonth[days[day]] = reps + ""; reps--; //decrement the date till it reaches the first day of the future month return reps < 1 ? futureMonth : tillEnd(reps);
}
function updateWithPast(past, dates) { //check if the past object has any dates else cancel this update if (Object.keys(past).length <= 0) { return dates; } var update = {}; //update the dates of the original current month calender; Object.keys(dates).forEach(function (key) { if (key in past) { dates[key].unshift(past[key]); } update[key] = dates[key]; }); return update;
}
function updateWithFuture(future, dates) { //update with future month dates if (Object.keys(future).length <= 0) { return dates; } var update = {}; Object.keys(dates).forEach(function (key) { if (key in future) { dates[key].push(future[key]); } update[key] = dates[key]; }); return update;
}
//the general function for updating the original dates object
function submit(past, future, dates) { return updateWithFuture(future, updateWithPast(past, dates));
}
//for simplicity sake a function to get the important data : the calender with updated past and future month dates
function getAllData() { var dates = getCarryOver(); return dates;
}
/**********************************COMPONENT**************************************/
var Calender = React.createClass({ displayName: "Calender", getInitialState: function getInitialState() { return { dates: getAllData() }; }, render: function render() { var mutate_ARRAY = days.map(function (key) { var each_weekday = this.state.dates[key].map(function (date) { //check if the date is a string or a number if (typeof date === "string") { return React.createElement( "li", { className: "dates overflow" }, date ); } else { return React.createElement( "li", { className: "dates", id: date === Data.today && Data.month == Data.currentMonth ? "today" : null }, date ); } }); return React.createElement( "div", null, React.createElement( "p", null, key.substring(0, 3) ), React.createElement( "ul", null, each_weekday ) ); }.bind(this)); return React.createElement( "div", null, React.createElement( "p", null, months[Data.month] + " " + Data.year ), mutate_ARRAY ); }
});
ReactDOM.render(React.createElement(Calender, null), document.getElementById("space"));
Calender Update - Script Codes
Calender Update - Script Codes
Home Page Home
Developer Ajala Comfort
Username AJALACOMFORT
Uploaded January 11, 2023
Rating 3
Size 6,157 Kb
Views 8,096
Do you need developer help for Calender Update?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ajala Comfort (AJALACOMFORT) Script Codes
Name
Bill Splitting App
SVG Clock Practice
Recipe Book
Material Chat app Interface with ReactJS
Basic ReactJs Form
COLOR PICKER
Palindrome Word
Math using Stacks
Hashtables
Intermediate Todo List with React.js
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!