0

I am looking to display a simple javascript calendar within a meteor-ionic template. I have the page setup correctly but when I write in the template helper: return document.write(buildCal(...)) the calendar hijacks the page and none of the other elements display. When I just code return buildCal(.....), it just prints out the all of the divs and not html. Can someone tell me what I am missing here?

calendar.js

function buildCal(m, y, cM, cH, cDW, cD, brdr) {
    var mn = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var dim = [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    var oD = new Date(y, m - 1, 1); //DD replaced line to fix date bug when current day is 31st
    oD.od = oD.getDay() + 1; //DD replaced line to fix date bug when current day is 31st

    var todaydate = new Date() //DD added
    var scanfortoday = (y == todaydate.getFullYear() && m == todaydate.getMonth() + 1) ? todaydate.getDate() : 0 //DD added

    dim[1] = (((oD.getFullYear() % 100 != 0) && (oD.getFullYear() % 4 == 0)) || (oD.getFullYear() % 400 == 0)) ? 29 : 28;
    var t = '<div class="' + cM + '"><table class="' + cM + '" cols="7" cellpadding="0" border="' + brdr + '" cellspacing="0"><tr align="center">';
    t += '<td colspan="7" align="center" class="' + cH + '">' + mn[m - 1] + ' - ' + y + '</td></tr><tr align="center">';
    for (s = 0; s < 7; s++) t += '<td class="' + cDW + '">' + "SMTWTFS".substr(s, 1) + '</td>';
    t += '</tr><tr align="center">';
    for (i = 1; i <= 42; i++) {
        var x = ((i - oD.od >= 0) && (i - oD.od < dim[m - 1])) ? i - oD.od + 1 : '&nbsp;';
        if (x == scanfortoday) //DD added
            x = '<span id="today">' + x + '</span>' //DD added
        t += '<td class="' + cD + '">' + x + '</td>';
        if (((i) % 7 == 0) && (i < 36)) t += '</tr><tr align="center">';
    }
    return t += '</tr></table></div>';
}

Template.calendar.helpers({
    currentcalendar: function() {
        var todaydate = new Date();
        var curmonth = todaydate.getMonth() + 1; //get current month (1-12)
        var curyear = todaydate.getFullYear(); //get current year
        return document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 1));
    }
});

calendar.html

<template name="calendar">
  {{#contentFor "headerButtonLeft"}}
    {{>ionNavBackButton path="index"}}
  {{/contentFor}}

  {{#contentFor "headerTitle"}}
    <h1 class="title">Calendar</h1>
  {{/contentFor}}

  {{#ionView}}
    {{#ionContent}}
      {{currentcalendar}}
    {{/ionContent}}
  {{/ionView}}
</template>

1 Answer 1

0

Just return buildCal() instead of document.write(buildCal()) - you almost never use document.write() in Meteor, templates give you dynamic content.

3
  • I had done that before posting and the html code would just be printed to screen. ie not interpreted as HTML. if that makes sense. Commented Nov 6, 2015 at 3:09
  • In that case either return a safeString or use triple-braces {{{currentCalendar}}} Commented Nov 6, 2015 at 3:10
  • Triple handlebars worked! {{{currentCalendar}}}. Thanks Michel! Commented Nov 6, 2015 at 6:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.