При клике по дате закрасить цветом

[Batyabest]

Всем привет! Нужно сделать такую вещь: график работы пользователя. Пользователь видит календарь на месяц. Кликает по нужному числу и отмечает его цветом (2 цвета). Все сохраняется "на лету".

function Calendar3(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
    D = new Date(year,month,Dlast),
    DNlast = D.getDay(),
    DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
    calendar = '<tr>',
    m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
    g = document.querySelector('#'+id+' input');
if (DNfirst != 0) {
  for(var  i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
  for(var  i = 0; i < 6; i++) calendar += '<td>';
}
for(var  i = 1; i <= Dlast; i++) {
  if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
    calendar += '<td class="today">' + i;
  }else{
    if (  // список официальных праздников
        (i == 1 && D.getMonth() == 0 && ((D.getFullYear() > 1897 && D.getFullYear() < 1930) || D.getFullYear() > 1947)) || // Новый год
        (i == 2 && D.getMonth() == 0 && D.getFullYear() > 1992) || // Новый год
        ((i == 3 || i == 4 || i == 5 || i == 6 || i == 8) && D.getMonth() == 0 && D.getFullYear() > 2004) || // Новый год
        (i == 7 && D.getMonth() == 0 && D.getFullYear() > 1990) || // Рождество Христово
        (i == 23 && D.getMonth() == 1 && D.getFullYear() > 2001) || // День защитника Отечества
        (i == 8 && D.getMonth() == 2 && D.getFullYear() > 1965) || // Международный женский день
        (i == 1 && D.getMonth() == 4 && D.getFullYear() > 1917) || // Праздник Весны и Труда
        (i == 9 && D.getMonth() == 4 && D.getFullYear() > 1964) || // День Победы
        (i == 12 && D.getMonth() == 5 && D.getFullYear() > 1990) || // День России (декларации о государственном суверенитете Российской Федерации ознаменовала окончательный Распад СССР)
        (i == 7 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 2005)) || // Октябрьская революция 1917 года
        (i == 8 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 1992)) || // Октябрьская революция 1917 года
        (i == 4 && D.getMonth() == 10 && D.getFullYear() > 2004) // День народного единства, который заменил Октябрьскую революцию 1917 года
       ) {
      calendar += '<td class="holiday">' + i;
    }else{
      calendar += '<td>' + i;
    }
  }
  if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
    calendar += '<tr>';
  }
}
for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
g.value = D.getFullYear();
m.selected = true;
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {
    document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
}
document.querySelector('#'+id+' option[value="' + new Date().getMonth() + '"]').style.color = 'rgb(220, 0, 0)'; // в выпадающем списке выделен текущий месяц
}
Calendar3("calendar3",new Date().getFullYear(),new Date().getMonth());
document.querySelector('#calendar3').onchange = function Kalendar3() {
  Calendar3("calendar3",document.querySelector('#calendar3 input').value,parseFloat(document.querySelector('#calendar3 select').options[document.querySelector('#calendar3 select').selectedIndex].value));
}

[Batyabest]

Нашел вот такой скрипт, который красит ячейки таблицы по кругу в 2 разных цвета.
по сути что подобное нужно реализовать с календарем. Проблема в том, как потом эту информацию сохранить, чтобы вывести где-либо в другой месте сайта?

<style>
#myTBL td     {background: white; color: black}
#myTBL td.act {background: black; color: white}
</style>
<script>
function myFunc (e)                               // в одних браузерах при клике сгенерируется объект event и передастся функции как аргумент e, в других - не передастся
{
var evt = window.event || e,                      // где event не передался, пользуем window.event
    obj = evt.srcElement || evt.target;           // получаем тег, по которому кликнули - синтаксис для двух групп браузеров
if (obj.tagName == 'TABLE') return;               // кликнули по бордеру или по межячеечному пространству, т.е. не точно по ячейке 
while (obj.tagName != 'TD') obj = obj.parentNode; // в ячейке могут быть внутренние теги (см. b22) - вверх по иерархии доходим от них до тега TD
obj.className = obj.className ? '' : 'act';       // если фон был белым, станет чёрным, и - наоборот
}
 
// только ПОСЛЕ окончания загрузки браузер будет знать о существовании тега с id="myTBL"
// и только ТОГДА мы можем дать браузеру команду назначить функцию обработки события клика по этому тегу
onload = function ()
{
var trg = document.getElementById ('myTBL');
if (document.addEventListener) trg.addEventListener ('click', myFunc); // синтаксис назначения функции для одних браузеров
else if (document.attachEvent) trg.attachEvent ('onclick', myFunc);    // для других
else trg.onclick = myFunc;                                             // для третьих
}
</script>

<table id="myTBL" cellpadding="5" cellspacing="10" border="1">
<tr><td>b00</td><td>b01</td><td>b02</td></tr>
<tr><td>b10</td><td>b11</td><td>b12</td></tr>
<tr><td>b20</td><td>b21</td><td><span><b>b<i>2<u>2</u></i></b></span></td></tr>
</table>