'; htmlAppend += '

'+months[i]+'

'; htmlAppend += '

'+('SMTWTFS'.split('').map(d=>'

'+d+'

').join(''))+'

'; htmlAppend += '

'; let info = monthInfo(i, year); var c = 0; for(let j=0;j'; c++; } for(let j=1;j<=info.nDays;j++) { htmlAppend += '

'+j+'

'; daysMatrix[i+'-'+j] = [(info.startDay + j - 1)%7 + 1, w]; c++; if(c%7==0) { w++; if(j+1<=info.nDays) htmlAppend += '

'; } } var t=1; while(c%7!=0) { htmlAppend += '

'+(t++)+'

'; c++; } htmlAppend += '

'; lastMonthNDays = info.nDays; } $year.html(htmlAppend); $legendList.text('No Label'); for(let label of yearLabels) { window.addLabel(label); } if(year == new Date().getFullYear()) { S.H('[data-month="'+new Date().getMonth()+'"] [data-day="'+new Date().getDate()+'"]').css('background', '#DDDDDD').css('color', '#333333'); } // Goals for(let goalI in yearGoals) { S.findElementByTag('my-year-goal-input').filter('[x-data-index="'+(parseInt(goalI) + 1)+'"]').val(yearGoals[goalI]); } }; window.addLabel = async (label) => { var dateFrom = new Date(label.dateFrom); var dateTo = new Date(label.dateTo); var dayFrom = dateFrom.getUTCDate(); var monthFrom = dateFrom.getUTCMonth(); var dayTo = dateTo.getUTCDate(); var monthTo = dateTo.getUTCMonth(); var fromPos = daysMatrix[monthFrom+'-'+dayFrom]; var toPos = daysMatrix[monthTo+'-'+dayTo]; S.H('.month-day-label[data-id="'+S.H.escape(label.id)+'"]').remove(); for(let w = fromPos[1];w<=toPos[1];w++) { var cStart = 1; if(w==fromPos[1]) { cStart = fromPos[0]; } var cEnd = 8; if(w==toPos[1]) { cEnd = toPos[0]+1; } S.H('[data-week="'+w+'"]').append('

'); //S.H().appendTo(''); } if($legendList.children().length==0) $legendList.empty(); S.H('.my-year-legend-entry[x-data-id="'+S.H.escape(label.id)+'"]').remove(); $legendList.append(await S.renderComponent('My Year - Legend Entry', { ID : label.id, Name : label.name, Color : label.color, }, false)); window.reparsePlugins(); }; await window.loadYearView(year); const saveYear = async () => { yearGoals = S.findElementByTag('my-year-goal-input').map(g=>g.value); if(editKey) { await S.httpPut('--editEntry', { editKey : editKey, data : { data : JSON.stringify({labels:yearLabels,goals:yearGoals}), }, }); } else { window.localStorage.setItem('myyear-'+year, JSON.stringify({labels:yearLabels,goals:yearGoals})); } }; window.showLabelEditor = (label={}, mode='create') => { if(typeof label=='string') { label = yearLabels.find(l=>l.id==label) || {}; } label = { id : Math.random().toString(36).substring(2, 7), dateFrom : '', dateTo : '', name : '', color : '#EE5A24', ...label }; $labelEditor.find('[name="dateFrom"], [name="dateTo"]').attr('type', 'date').attr('min', year+'-01-01').attr('max', year+'-12-31'); $labelEditor.find('[name="name"]').val(label.name); $labelEditor.find('[data-color="'+label.color+'"]').trigger('click'); $labelEditor.find('[name="dateFrom"]').val(label.dateFrom?new Date(label.dateFrom).toISOString().split('T')[0]:''); $labelEditor.find('[name="dateTo"]').val(label.dateTo?new Date(label.dateTo).toISOString().split('T')[0]:''); S.findElementByTag('label-editor-save').off('click').on('click', async () => { if(!$labelEditor.find('[name="dateFrom"]').val() || !$labelEditor.find('[name="dateTo"]').val()) return; label = { ...label, name : $labelEditor.find('[name="name"]').val() || 'Unlabeled', dateFrom : new Date($labelEditor.find('[name="dateFrom"]').val()), dateTo : new Date($labelEditor.find('[name="dateTo"]').val()), color : $labelEditor.find('[data-color].my-year-label-editor-swatch-selected').attr('data-color'), }; if(label.dateFrom > label.dateTo) { var tmp = label.dateTo; label.dateTo = label.dateFrom; label.dateFrom = tmp; } if(mode=='edit') { var idx = yearLabels.findIndex(l=>l.id==label.id); if(idx>=0) { yearLabels.splice(idx, 1, label); } else { yearLabels.push(label); } window.addLabel(label); } else { yearLabels.push(label); window.addLabel(label); } $labelEditor.removeClass('my-year-label-editor-open'); saveYear(); }); $labelEditor.addClass('my-year-label-editor-open'); }; var focusOn; $year.on('click', '.month-day-number', function() { var val = year+'-'+String(parseInt(this.closest('.month').attr('data-month'))+1).padStart(2, '0')+'-'+this.attr('data-day').padStart(2, '0'); if($labelEditor.is('.my-year-label-editor-open')) { if(focusOn && focusOn.isEqualNode($labelEditor.find('[name="dateTo"]')[0])) { $labelEditor.find('[name="dateTo"]').val(val); $labelEditor.find('[name="dateFrom"]').trigger('focus'); } else { $labelEditor.find('[name="dateFrom"]').val(val); $labelEditor.find('[name="dateTo"]').trigger('focus'); } } else { window.showLabelEditor({ dateFrom : val, }); $labelEditor.find('[name="dateTo"]').trigger('focus'); } }); $labelEditor.find('[name="dateFrom"], [name="dateTo"]').on('focus', (e) => focusOn=e.target); $year.on('click', '.month-day-label', function() { window.showLabelEditor(this.attr('data-id'), 'edit'); }); $legendList.on('click', '.my-year-legend-swatch, .my-year-legend-name', function() { window.showLabelEditor(this.parent().attr('x-data-id'), 'edit'); }); $legendList.on('click', '.my-year-legend-icon', function() { var id = this.parent().attr('x-data-id'); S.H('.month-day-label[data-id="'+S.H.escape(id)+'"]').remove(); S.H('.my-year-legend-entry[x-data-id="'+S.H.escape(id)+'"]').remove(); var idx = yearLabels.findIndex(l=>l.id==id); if(idx>=0) { yearLabels.splice(idx, 1); } saveYear(); }); const highlightLabel = (id) => { if(id) { S.H('.month-day-label:not([data-id="'+id+'"]), .my-year-legend-entry:not([x-data-id="'+id+'"])').css('opacity', '0.4'); } else { S.H('.month-day-label, .my-year-legend-entry').css('opacity', ''); } }; S.H('body').on('mouseover', '.month-day-label, .my-year-legend-entry', function() { highlightLabel(this.attr('data-id') || this.attr('x-data-id')); }); S.H('body').on('mouseout', '.month-day-label, .my-year-legend-entry', function() { highlightLabel(); }); S.findElementByTag('my-year-goal-input').on('change', () => { saveYear(); }); S.H('head').append(``)

Login

or Signup

My Year

5 Most Important Goals