Skip to content
This repository was archived by the owner on Mar 4, 2021. It is now read-only.

fix current date and add specific set date #22

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix current date and add specific set date #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions calendarorganizer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ function Calendar(id, size, labelSettings, colors, options) {
var label = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
if (options.days != undefined && options.days.length == 7) label = options.days;

if (options.custom_date != undefined) {
this.date = options.custom_date;
}
else{
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you please tweak this line so it looks like the following example?

if () {
  // something
} else {
  // something else
}

this.date = new Date();
}
this.selected_date = new Date(this.date);
this.today = new Date();
this.months = months;
this.defaultLabels = label;

Expand All @@ -45,8 +53,6 @@ function Calendar(id, size, labelSettings, colors, options) {
this.labels.push(this.label[i].substring(0, labelSettings[1] > 3 ? 3 : labelSettings[1]));
}

this.date = new Date();
this.today = new Date();

this.history = [];

Expand Down Expand Up @@ -239,6 +245,7 @@ Calendar.prototype.update = function () {
for (var i = 1; i <= 42; i++) {
document.getElementById(this.id + '-day-num-' + i).innerHTML = "";
document.getElementById(this.id + '-day-' + i).className = this.id + " cjslib-day cjslib-day-listed";
document.getElementById(this.id + '-day-radio-' + i).checked = false;
}

var firstDay = new Date(this.date.getFullYear(), this.date.getMonth(), 1).getDay();
Expand All @@ -259,7 +266,9 @@ Calendar.prototype.update = function () {
for (var i = 1; i <= lastDay; i++) {
document.getElementById(this.id + '-day-num-' + (firstDayLabelPos + i)).innerHTML = i;

if (i == this.date.getDate()) document.getElementById(this.id + '-day-radio-' + (firstDayLabelPos + i)).checked = true;
if ((i == this.date.getDate()) && (this.selected_date.getMonth() == this.date.getMonth())) {
document.getElementById(this.id + '-day-radio-' + (firstDayLabelPos + i)).checked = true;
}

if (this.date.getMonth() == this.today.getMonth())
if (i == this.today.getDate()) document.getElementById(this.id + '-day-' + (firstDayLabelPos + i)).className += " cjslib-day-today";
Expand Down Expand Up @@ -702,6 +711,7 @@ Organizer.prototype.setupLongClickBlock = function (blockId, organizerInstance,

var mouseDownEvent = function () {
document.getElementById(calendarInstance.id + "-day-num-" + blockId).dataset.longpressed = "-";
calendarInstance.selected_date = new Date(calendarInstance.date);

window.setTimeout(function () {
if (document.getElementById(calendarInstance.id + "-day-num-" + blockId).innerHTML.length > 0) {
Expand Down
116 changes: 116 additions & 0 deletions examples/calendar_set_date.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<html>

<head>
<title>Dynamic Organizer Example</title>
<link href="../calendarorganizer.min.css" rel="stylesheet">
</head>

<body>
<div id="calendarContainer"></div>
<div id="organizerContainer"></div>
<script src="../calendarorganizer.js"></script>
<script>
"use strict";

// function that creates dummy data for demonstration
function createDummyData() {
var date = new Date();
var data = {};

for (var i = 0; i < 10; i++) {
data[date.getFullYear() + i] = {};

for (var j = 0; j < 12; j++) {
data[date.getFullYear() + i][j + 1] = {};

for (var k = 0; k < Math.ceil(Math.random() * 10); k++) {
var l = Math.ceil(Math.random() * 28);

try {
data[date.getFullYear() + i][j + 1][l].push({
startTime: "10:00",
endTime: "12:00",
text: "Some Event Here"
});
} catch (e) {
data[date.getFullYear() + i][j + 1][l] = [];
data[date.getFullYear() + i][j + 1][l].push({
startTime: "10:00",
endTime: "12:00",
text: "Some Event Here"
});
}
}
}
}

return data;
}

// INSTEAD OF GRABBING THE DATA FROM AN AJAX REQUEST
// I WILL BE DEMONSTRATING THE SAME EFFECT THROUGH MEMORY
// THIS DEFEATS THE PURPOSE BUT IS SIMPLER TO UNDERSTAND
var serverData = createDummyData();
var test_day = new Date(Date.parse("2020/11/21"));

// stating variables in order for them to be global
var calendar, organizer;

// initializing a new calendar object, that will use an html container to create itself
calendar = new Calendar("calendarContainer", // id of html container for calendar
"small", // size of calendar, can be small | medium | large
[
"Wednesday", // left most day of calendar labels
3 // maximum length of the calendar labels
],
[
"#ffc107", // primary color
"#ffa000", // primary dark color
"#ffffff", // text color
"#ffecb3" // text dark color
],
{
indicator: true,
indicator_type: 0, // indicator type, can be 0 (not numeric) | 1 (numeric)
indicator_pos: "top", // indicator position, can be top | bottom
custom_date: test_day
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please change the custom_date to something like initial_date or pre_selected_date, those are a bit more informative than custom_date 👍🏼

}
);

// This is gonna be similar to an ajax function that would grab
// data from the server; then when the data for a this current month
// is grabbed, you just add it to the data object of the form
// { year num: { month num: { day num: [ array of events ] } } }
function dataWithAjax(date, callback) {
var data = {};

try {
data[date.getFullYear()] = {};
data[date.getFullYear()][date.getMonth() + 1] = serverData[date.getFullYear()][date.getMonth() + 1];
} catch (e) {}

callback(data);
};

window.onload = function() {
dataWithAjax(new Date(), function(data) {
// initializing a new organizer object, that will use an html container to create itself
organizer = new Organizer("organizerContainer", // id of html container for calendar
calendar, // defining the calendar that the organizer is related
data // small part of the data of type object
);

// after initializing the organizer, we need to initialize the onMonthChange
// there needs to be a callback parameter, this is what updates the organizer
organizer.onMonthChange = function(callback) {
dataWithAjax(organizer.calendar.date, function(data) {
organizer.data = data;
callback();
});
};
});
};
</script>
</body>

</html>