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.

6
  • 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
    Commented Jan 28, 2014 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. Commented Jan 29, 2014 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
    Commented Jan 30, 2014 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. Commented Jan 30, 2014 at 22:44
  • Are you seeing any javascript errors in the web inspector console?
    – aelvan
    Commented Jan 31, 2014 at 11:06

0

Your Answer

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

Browse other questions tagged or ask your own question.