View the previous and upcoming month in a basic calendar format

Question

View the previous and upcoming month in a basic calendar format

I have developed a basic calendar that displays the current month successfully. However, I am having trouble with the "<<" and ">>" buttons meant to navigate to the previous and next months when clicked.

Here is an excerpt of the code:

prevMonth:function(){
    var month = $('.u-start-month').text(),
        year = $('.u-start-year').text();
    if(month <= 1){
        month = 12;
        --year;
    }
    else{
        --month;
    }
    this.initDate(year, month, $.proxy(function(){
        this.dir = 'left';
        this.init(year, month);
    }, this));
},

Can anyone spot what I might be missing?

javascript

Answer 1

Answer №1

It appears that the issue was not with anything missing, but rather that an event handler for the function was never set up. To resolve this, simply add the following jQuery code:

 $('.u-start-prev').on('click',function(){
        Start.prevMonth();
    });
     $('.u-start-next').on('click',function(){
        Start.nextMonth();
    });

After adding this code, the functionality should work properly. Feel free to check out the working example in this fiddle. Please let me know if there was any misunderstanding.

http://jsfiddle.net/44LpP/2/

Answer 2

It appears that the issue was not with anything missing, but rather that an event handler for the function was never set up. To resolve this, simply add the following jQuery code:

 $('.u-start-prev').on('click',function(){
        Start.prevMonth();
    });
     $('.u-start-next').on('click',function(){
        Start.nextMonth();
    });

After adding this code, the functionality should work properly. Feel free to check out the working example in this fiddle. Please let me know if there was any misunderstanding.

http://jsfiddle.net/44LpP/2/

Answer 3

Answer №2

Include the onclick event directly in your HTML code: http://jsbin.com/piqatota/1/edit?html,js,output

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><div class="u-start">
    <div class="u-start-header">
        <div class="u-start-prev" onclick="Start.prevMonth();"><<</div>
        <div class="u-start-date">
            <strong>Start Calendar</strong>
            <span><em class="u-start-year"></em>-<em class="u-start-month"></em></span>
        </div>
        <div class="u-start-next" onclick="Start.nextMonth();">>></div>
    </div>
    <table class="u-start-body"></table>
    <div class="u-start-footer"></div>
</div>

Answer 4

Include the onclick event directly in your HTML code: http://jsbin.com/piqatota/1/edit?html,js,output

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><div class="u-start">
    <div class="u-start-header">
        <div class="u-start-prev" onclick="Start.prevMonth();"><<</div>
        <div class="u-start-date">
            <strong>Start Calendar</strong>
            <span><em class="u-start-year"></em>-<em class="u-start-month"></em></span>
        </div>
        <div class="u-start-next" onclick="Start.nextMonth();">>></div>
    </div>
    <table class="u-start-body"></table>
    <div class="u-start-footer"></div>
</div>

View the previous and upcoming month in a basic calendar format

Answer №1

Answer №2

Similar questions

React does not allow functions as child elements. I have thoroughly reviewed my code and cannot identify the source of this issue

Enhance your React application by using a personalized hook that allows you to trigger a function

DOM not rendering Angular function output successfully

Is it possible to use Vuejs v-model for a complete form instead of individual inputs?

Looking to automate the selection of a dropdown menu using Selenium with JavaScript

When utilizing array.push() with ng-repeat, it appears that separate scopes are not generated for each item

Having trouble with finding the correct object in an array of objects using indexOf and splice()?

Tips for handling an empty jQuery selection

What is the most effective way to save numerical information to a file?

The form submits automatically upon loading the page with empty input fields

Error: CSRF token not found or invalid. What is the procedure for transmitting a CSRF token from the frontend to the backend?

Turn on/off the button click functionality on a jQuery smart wizard control

Troubleshooting the issue with utilizing the ng-repeat directive to loop through images in Angular JS

Is it possible to invoke a helper function in Node.js from within a callback?

"Concealing a div based on the toggling of another one - here's

Execute the JS function during the first instance of window scrolling

"Create a sleek slider with a modern Apple store aesthetic using Javascript

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

Guide on utilizing fragment shaders from glslsandbox.com

making changes to the JS node dependency package results in a syntax error during compilation process, particularly within the npm/Vue.js environment