1

EE 2.7.2
Solspace Calendar 1.8.5

I'm running into troubles getting the calendar to change months. I'm not well versed in jQuery so I'm using the tutorial found here. The calendar is showing up perfectly on the wrapper template, but when clicking the calendar navigation arrows, nothing happens. Here are my templates:

Mini Calendar Template:

    <?php
if (isset ($_POST ['month'])):
    $month = $_POST [ 'month'];
    $year = $_POST ['year'];
else:
    $month = date('m');
    $year = date('Y');
endif;
?>

{exp:calendar:cal
    date_range_start="<?php echo $year; ?>-<?php echo $month; ?>-01"
    date_range_end="<?php echo $year; ?>-<?php echo $month; ?>-last"
}
    {display_each_month}
        <table class="Calendar">
            <thead class="Calendar-header">
                <tr>
                    <th colspan="1" class="Calendar-nav">
                        <a
                            id="mc_prev_month"
                            class="icon left"
                            href="#" alt="{prev_month format="%m"}" title="{prev_month format="%Y"}">&larr;</a>
                    </th>
                    <th class="Calendar-month" colspan="5">
                        <a href="{path='calendar/month'}/{month format="%Y/%m/%d"}">
                            {date format="%F %Y"}
                        </a>
                    </th>
                    <th colspan="1" class="Calendar-nav">
                        <a
                            id="mc_next_month"
                            class="icon right"
                            href="#" alt="{next_month format="%m"}" title="{next_month format="%Y"}">
                            &rarr;
                        </a>
                    </th>
                </tr>
                <tr id="mc_days">
                {display_each_day_of_week}
                    <th class="{if day_of_week_is_weekend}weekend{/if} {if day_of_week_is_current}current{/if}">
                        {day_of_week_one}
                    </th>
                {/display_each_day_of_week}
                </tr>
            </thead>
            <tbody>
                {display_each_week}
                <tr>
                    {display_each_day}
                    <td cellpadding="0" cellspacing="0" class="Calendar-date
                        {if day_in_current_month == FALSE}Calendar-date--mute{/if}
                        {if day_event_total > 0}Calendar-date--hasEvents{/if}
                        {if count == 7}Calendar-date--selected{/if}
                        {if day_is_today}Calendar-date--today{/if}
                        {if day_is_weekend}Calendar-date--weekend{/if}
                        {if day_is_weekday}Calendar-date--weekday{/if}
                    ">
                         {if day_in_current_month}
                            {if day_event_total}<a href="{path='calendar/day'}/{date format="%Y/%m/%d"}/">{/if}
                                {day}
                            {if day_event_total}</a>{/if}
                        {if:else}
                            <strong class="middot">&middot;</strong>
                        {/if}

                    </td>
                    {/display_each_day}
                </tr>
                {/display_each_week}
            </tbody>
        </table>
    {/display_each_month}
{/exp:calendar:cal}

Wrapper template:

<!DOCTYPE html>
<head>
</head>
<body>

<div id="drop2"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        var month = "<?php echo $month; ?>";
        var year = "<?php echo $year; ?>";

        render_calendar(month,year);

        function render_calendar(month,year) {
            $.post(
                "[site url removed]/inc/mini-calendar",
                { month : month, year : year},
                function(str) {
                    $('#drop2').html(str).fadeIn();
                }
            );
        }

        $(".Calendar-nav a").click(function() {
            $('.Calendar').fadeOut('fast');
            month = $(this).attr('alt');
            year = $(this).attr('title');
            render_calendar(month, year);
        });

    })
</script>

</body>
</html>

You'll notice I've switched to GET instead of POST because of errors with XID hash (or at least that's what I think is going on).

I think it's something really simple here, but I can't put my finger on it.

  • Did you turn on PHP on your template? Do you see any errors/warnings in your browser template? That can give you a hint about what's wrong. – Solspace Jan 28 '14 at 16:36
  • Both templateshave PHP on and Input parsing stage. I don't see any errors in my developer tools console. The only error I've seen is when I switch to POST method and I get some super generic EE error: "The action you have requested is invalid." Like I mentioned, I presume it has to do with the missing XID Hash. – John Johnson Jan 29 '14 at 21:58
  • If you turn off secure forms in EE, does ajax work correctly then? If so, you indeed need to provide an XID hash (if "secure forms" is enabled in EE). – Solspace Jan 30 '14 at 14:26
  • Turning off secure forms does indeed allow the calendar to show without any EE errors. Still, clicking on the navigation arrows doesn't do anything but put a hashtag in the address bar. Something isn't firing when clicking on the calendar navigation links. Is there any glaring problems in the jQuery I posted? Can you duplicate on your end? I've now switched everything to POST since it no longer throws an error. – John Johnson Jan 30 '14 at 22:44
  • Are you seeing any javascript errors in the web inspector console? – aelvan Jan 31 '14 at 11:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.