Skip to content

Instantly share code, notes, and snippets.

@vicolachips44

vicolachips44/calendar-utils.coffee

Last active August 29, 2015 13:58
Show Gist options
  • Save vicolachips44/9956693 to your computer and use it in GitHub Desktop.
Save vicolachips44/9956693 to your computer and use it in GitHub Desktop.
Download ZIP
A calendar to remind me that coffeescript might worth it!
Raw
calendar-utils.coffee
class CalendarUtils
##---------------------------------------------------------------------------
@padNumber = (count, value) ->
svalue = value.toString()
spad = Array(count - svalue.length + 1).join '0'
# return the value
spad + svalue
##---------------------------------------------------------------------------
@getNextMonth = (year, month) ->
if month > 10
next_month = 0
next_year = year + 1
else
next_month = month + 1
next_year = ny
return [next_year, next_month]
##---------------------------------------------------------------------------
@getPreviousMonth = (year, month) ->
if month < 1
prev_month = 11
prev_year = year - 1
else
prev_month = month - 1
prev_year = year
return [prev_year, prev_month]
##---------------------------------------------------------------------------
@dayInMonth = (year, month) ->
# month doit etre entre 0 et 11
month = month + 1
if month == 1
m = 12
y = year - 1
else
m = month - 1
y = year
Math.round(((new Date(year, month)) - (new Date(y, m)))/86400000)
Raw
calendar.coffee
class Calendar
sp = ' '
constructor: (@domRoot) ->
##---------------------------------------------------------------------------
@settings =
weeknames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday'],
monthnames: ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'],
calendar: null,
curMonth: -1,
curYear: -1
##---------------------------------------------------------------------------
@displayCalendar = (calendar_id) ->
calRenderer = new Calendar(calendar_id)
Calendar.settings.calendar = calRenderer
calRenderer.render(new Date())
##---------------------------------------------------------------------------
@displayPreviousMonth = () ->
nm = Calendar.settings.curMonth
ny = Calendar.settings.curYear
if nm < 1
nmb = 11
nyb = ny - 1
else
nmb = nm - 1
nyb = ny
Calendar.settings.calendar.render(new Date(nyb, nmb, 1))
Calendar.settings.curMonth = nmb
Calendar.settings.curYear = nyb
##---------------------------------------------------------------------------
@displayNextMonth = () ->
nm = Calendar.settings.curMonth
ny = Calendar.settings.curYear
if nm > 10
nms = 0
nys = ny + 1
else
nms = nm + 1
nys = ny
Calendar.settings.calendar.render(new Date(nys, nms, 1))
Calendar.settings.curMonth = nms
Calendar.settings.curYear = nys
##---------------------------------------------------------------------------
render: (in_date) ->
# empty the div container
this.domRoot.empty()
# array of year, month , day
dateinf = [in_date.getFullYear(), in_date.getMonth(), in_date.getDate()]
Calendar.settings.curYear = dateinf[0]
Calendar.settings.curMonth = dateinf[1]
# first day in month
fdm = new Date(dateinf[0], dateinf[1], 1)
# get previous month (year, month)
dateinfprev = CalendarUtils.getPreviousMonth(dateinf[1], dateinf[0])
# number of days in month
days = calcDays(CalendarUtils.dayInMonth(dateinf[0], dateinf[1]))
# number of days to display for previous month
prevdays = getPrevMonthLastDays(
dateinfprev[0], dateinfprev[1], fdm.getDay() - 1
)
flushTable(this.domRoot)
captionValue = Calendar.settings.monthnames[in_date.getMonth()] +
sp + dateinf[0].toString()
$('#dctCalendarTable').append(
'<caption valign="top">' + captionValue + '</caption>'
)
calBody = $('#dctCalendarBody')
calBody.append('<tr id="dctWeekDaysRow">')
calBody.append('</tr>')
$('#dctWeekDaysRow').append('<td class="dct-weekday-names">' +
dayname + '</td>') for dayname in Calendar.settings.weeknames
switchMe = 0
rowNum = 1
for prevday in prevdays
if (switchMe % 7) == 0
flushRow(calBody, rowNum)
rowNum++
cell = new CellObj(prevday, rowNum)
cell.render(false)
switchMe++
for day in days
if (switchMe % 7) == 0
flushRow(calBody, rowNum)
rowNum++
cell = new CellObj(day, rowNum)
cell.render(true)
switchMe++
nmonth = 0
while true
nmonth++
break unless (switchMe % 7) != 0
cell = new CellObj(nmonth, rowNum)
cell.render(false)
switchMe++
##---------------------------------------------------------------------------
flushTable = (root) ->
root.append('<table id="dctCalendarTable"><tbody id="dctCalendarBody">')
root.append('</tbody></table>')
##---------------------------------------------------------------------------
flushRow = (root, rowNum) ->
root.append('<tr id="row_' + rowNum.toString() + '">')
root.append('</tr>')
##---------------------------------------------------------------------------
getPrevMonthLastDays = (nyb, nmb, dbf) ->
nbd = CalendarUtils.dayInMonth(nyb, nmb)
if dbf < 0 then return []
days for days in [(nbd - dbf)..nbd]
##---------------------------------------------------------------------------
calcDays = (nbd) ->
daynum for daynum in [1..nbd]
##*****************************************************************************
class CellObj
##---------------------------------------------------------------------------
cellDate = null
##---------------------------------------------------------------------------
constructor: (@dayNumber, @rowNumber) ->
this.cellDate = new Date(
Calendar.settings.curYear, Calendar.settings.curMonth, dayNumber
)
##---------------------------------------------------------------------------
render: (bInMonth) ->
tdTarget = "dct_td_" + (this.rowNumber - 1) + "_" + this.dayNumber
tdSelector = '#' + tdTarget
trElement = "#dctCalendarBody tr:eq(" + (this.rowNumber - 1) + ")"
$(trElement).append('<td id="' +
tdTarget + '" class="dct-month-day"></td>')
$(tdSelector).append('<div class="dct-day-header">' +
this.dayNumber + '</div><div class="dct-day-content"></div>')
headerSelector = tdSelector + " .dct-day-header"
if bInMonth
$(tdSelector).addClass("dct-cell-color")
$(tdSelector).hover(
-> $(this).addClass("dct-hightcell"),
-> $(this).removeClass("dct-hightcell")
)
else
$(tdSelector).addClass("dct-cell-color-off")
$(tdSelector).hover(
-> $(this).addClass("dct-hightcell"),
-> $(this).removeClass("dct-hightcell")
)
$('.dct-day-header').hover(
-> $(this).css("background-color", "blue"),
-> $(this).css("background-color", "SaddleBrown")
)
_this = this
$(tdSelector).find('.dct-day-header').click () ->
console.log("cell " + _this.cellDate.toString() + " was clicked")
Raw
calendar.css
body { padding: 0px; margin: 0px; background-color: white; }
.dct-container { display: block; clear: both;
text-align: center; padding: 10px;
}
#myCalendar caption { background-color: black; color: white; }
#myCalendar table { margin-left: auto; margin-right: auto;
text-align: center; border-collapse: collapse; border: 1px black solid
}
#myCalendar td { border: 1px black solid; padding: 2px; }
.dct-cell-color { background-color: black; font-weight: bolder; }
.dct-cell-color-off { background-color: gray; }
.dct-cell-color-off .dct-day-content { background-color: gray; }
.dct-hightcell { background-color: RoyalBlue; }
.dct-month-day { width: 200px; height: 64px; text-align: center }
.dct-weekday-names { text-align: center; font-weight: bold;
background-color: AntiqueWhite; color: Brown;
}
.dct-day-header { -webkit-user-select: none; -moz-user-select: none;
-ms-user-select: none; cursor: default; padding: 0px;
margin: 0px; background-color: SaddleBrown; color: WhiteSmoke;
}
.dct-day-content { display: block; height:100%; width:100%;
text-align: left; background-color: Lightgray;
}
.dct_black { background-color: black; color: white; }
Raw
calendar.js
// Generated by CoffeeScript 1.7.1
var Calendar, CellObj;
Calendar = (function() {
var calcDays, flushRow, flushTable, getPrevMonthLastDays, sp;
sp = ' ';
function Calendar(domRoot) {
this.domRoot = domRoot;
}
Calendar.settings = {
weeknames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
monthnames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
calendar: null,
curMonth: -1,
curYear: -1
};
Calendar.displayCalendar = function(calendar_id) {
var calRenderer;
calRenderer = new Calendar(calendar_id);
Calendar.settings.calendar = calRenderer;
return calRenderer.render(new Date());
};
Calendar.displayPreviousMonth = function() {
var nm, nmb, ny, nyb;
nm = Calendar.settings.curMonth;
ny = Calendar.settings.curYear;
if (nm < 1) {
nmb = 11;
nyb = ny - 1;
} else {
nmb = nm - 1;
nyb = ny;
}
Calendar.settings.calendar.render(new Date(nyb, nmb, 1));
Calendar.settings.curMonth = nmb;
return Calendar.settings.curYear = nyb;
};
Calendar.displayNextMonth = function() {
var nm, nms, ny, nys;
nm = Calendar.settings.curMonth;
ny = Calendar.settings.curYear;
if (nm > 10) {
nms = 0;
nys = ny + 1;
} else {
nms = nm + 1;
nys = ny;
}
Calendar.settings.calendar.render(new Date(nys, nms, 1));
Calendar.settings.curMonth = nms;
return Calendar.settings.curYear = nys;
};
Calendar.prototype.render = function(in_date) {
var calBody, captionValue, cell, dateinf, dateinfprev, day, dayname, days, fdm, nmonth, prevday, prevdays, rowNum, switchMe, _i, _j, _k, _len, _len1, _len2, _ref, _results;
this.domRoot.empty();
dateinf = [in_date.getFullYear(), in_date.getMonth(), in_date.getDate()];
Calendar.settings.curYear = dateinf[0];
Calendar.settings.curMonth = dateinf[1];
fdm = new Date(dateinf[0], dateinf[1], 1);
dateinfprev = CalendarUtils.getPreviousMonth(dateinf[1], dateinf[0]);
days = calcDays(CalendarUtils.dayInMonth(dateinf[0], dateinf[1]));
prevdays = getPrevMonthLastDays(dateinfprev[0], dateinfprev[1], fdm.getDay() - 1);
flushTable(this.domRoot);
captionValue = Calendar.settings.monthnames[in_date.getMonth()] + sp + dateinf[0].toString();
$('#dctCalendarTable').append('<caption valign="top">' + captionValue + '</caption>');
calBody = $('#dctCalendarBody');
calBody.append('<tr id="dctWeekDaysRow">');
calBody.append('</tr>');
_ref = Calendar.settings.weeknames;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
dayname = _ref[_i];
$('#dctWeekDaysRow').append('<td class="dct-weekday-names">' + dayname + '</td>');
}
switchMe = 0;
rowNum = 1;
for (_j = 0, _len1 = prevdays.length; _j < _len1; _j++) {
prevday = prevdays[_j];
if ((switchMe % 7) === 0) {
flushRow(calBody, rowNum);
rowNum++;
}
cell = new CellObj(prevday, rowNum);
cell.render(false);
switchMe++;
}
for (_k = 0, _len2 = days.length; _k < _len2; _k++) {
day = days[_k];
if ((switchMe % 7) === 0) {
flushRow(calBody, rowNum);
rowNum++;
}
cell = new CellObj(day, rowNum);
cell.render(true);
switchMe++;
}
nmonth = 0;
_results = [];
while (true) {
nmonth++;
if ((switchMe % 7) === 0) {
break;
}
cell = new CellObj(nmonth, rowNum);
cell.render(false);
_results.push(switchMe++);
}
return _results;
};
flushTable = function(root) {
root.append('<table id="dctCalendarTable"><tbody id="dctCalendarBody">');
return root.append('</tbody></table>');
};
flushRow = function(root, rowNum) {
root.append('<tr id="row_' + rowNum.toString() + '">');
return root.append('</tr>');
};
getPrevMonthLastDays = function(nyb, nmb, dbf) {
var days, nbd, _i, _ref, _results;
nbd = CalendarUtils.dayInMonth(nyb, nmb);
if (dbf < 0) {
return [];
}
_results = [];
for (days = _i = _ref = nbd - dbf; _ref <= nbd ? _i <= nbd : _i >= nbd; days = _ref <= nbd ? ++_i : --_i) {
_results.push(days);
}
return _results;
};
calcDays = function(nbd) {
var daynum, _i, _results;
_results = [];
for (daynum = _i = 1; 1 <= nbd ? _i <= nbd : _i >= nbd; daynum = 1 <= nbd ? ++_i : --_i) {
_results.push(daynum);
}
return _results;
};
return Calendar;
})();
CellObj = (function() {
var cellDate;
cellDate = null;
function CellObj(dayNumber, rowNumber) {
this.dayNumber = dayNumber;
this.rowNumber = rowNumber;
this.cellDate = new Date(Calendar.settings.curYear, Calendar.settings.curMonth, dayNumber);
}
CellObj.prototype.render = function(bInMonth) {
var headerSelector, tdSelector, tdTarget, trElement, _this;
tdTarget = "dct_td_" + (this.rowNumber - 1) + "_" + this.dayNumber;
tdSelector = '#' + tdTarget;
trElement = "#dctCalendarBody tr:eq(" + (this.rowNumber - 1) + ")";
$(trElement).append('<td id="' + tdTarget + '" class="dct-month-day"></td>');
$(tdSelector).append('<div class="dct-day-header">' + this.dayNumber + '</div><div class="dct-day-content"></div>');
headerSelector = tdSelector + " .dct-day-header";
if (bInMonth) {
$(tdSelector).addClass("dct-cell-color");
$(tdSelector).hover(function() {
return $(this).addClass("dct-hightcell");
}, function() {
return $(this).removeClass("dct-hightcell");
});
} else {
$(tdSelector).addClass("dct-cell-color-off");
$(tdSelector).hover(function() {
return $(this).addClass("dct-hightcell");
}, function() {
return $(this).removeClass("dct-hightcell");
});
}
$('.dct-day-header').hover(function() {
return $(this).css("background-color", "blue");
}, function() {
return $(this).css("background-color", "SaddleBrown");
});
_this = this;
return $(tdSelector).find('.dct-day-header').click(function() {
return console.log("cell " + _this.cellDate.toString() + " was clicked");
});
};
return CellObj;
})();
Raw
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Javascript calendar</title>
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body onload="Calendar.displayCalendar($('#myCalendar'))">
<div class="dct-container">
<div>
<button name="previous" onclick="Calendar.displayPreviousMonth()">previous</button>
<button name="previous" onclick="Calendar.displayNextMonth()">next</button>
</div>
<br />
<div id="myCalendar"></div>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="calendar-utils.js"></script>
<script src="calendar.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment