Question about "dynamic" calendar

[brogenParticipant]

Hi all,

I have a question. I wanted to know if my project is possible with the Calendar.

I generate one chart by day, and I want to navigate with the calendar. My files have the date of generation as name (dd-mm-YYYY.html)

So, What I think, is, when I click on Thursday 4th April 2015 on calendar, it links and open the files 04-04-2015.html.

I hope it’s clear enough…

Is it possible ?

Thanks

[VladimirParticipant]

Hello brogen,

Yes this is absolutely possible:

You can tap on the change event of the calendar and place logic there to initialize your chart with the appropriate url.

$('#jqxCalendar').on('change', function (event) {
    var date = $('#jqxCalendar').val();
    var url = ("0" + date.getDate()).slice(-2) + '-' + ("0" + (date.getMonth()+1)).slice(-2) + '-' + date.getFullYear() + '.html';
    // reload chart with generated url here
});

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Hello Vladimir.

Thanks for your answer. It’s Working great !

For a best screen display i’m trying to generate a popup that open the calendar. So, I tried with jqxDateTimeInput , but my code is not working.
When I click on a date, there is no event…

$(‘#jqxDateTimeInput’).on(‘change’, function (event) {
var date = $(‘#jqxDateTimeInput’).val();
var url = (“0” + date.getDate()).slice(-2) + ‘-‘ + (“0” + (date.getMonth()+1)).slice(-2) + ‘-‘ + date.getFullYear() + ‘.html’;
// reload chart with generated url here
window.location = url;
});

[brogenParticipant]

Hello,

If I can’t use jqxDateTimeInput, is there any where to generate a popup with the calendar ?

Thanks 🙂

[VladimirParticipant]

Hello brogen,

You can use a jqxWindow and add a calendar to it, then close the window (if you want to) when you select a date, or place a close button to do that, and use the selected date this way.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Hello Vladimir,

Thanks for all your answers. I’m almost done 🙂

I just have a little problem with calendar event, for opening my custom URL

So, at http://eosgallery.net/jq/calen.html my code seems working great…

But, at http://eosgallery.net/jq/calen.html (at the bottom, after click on “choisir une date”), when I click on a date, it doesn’t open the url.

Atm i’m still testing by changing the window.location= url; but still not working…

Thanks again for help ^^

[brogenParticipant]

Sorry, i can’t reply.

There is a little mistake on my last post :

But, at http://eosgallery.net/jq (at the bottom, after click on “choisir une date”), when I click on a date, it doesn’t open the url.

[VladimirParticipant]

Hello brogen,

Ofcourse it won’t work. It throws an error in the console.

Uncaught Error: Invalid Selector – #Events! Please, check whether the used ID or CSS Class name is correct.

Which is caused by this code:

            $('#Events').css('border', 'none');
            $('#Events').jqxPanel({  height: '250px', width: '600px' });

Which works in the first example because you have this in the html section:

     <div>
           <div id='Events'> 
           </div>
     </div>

But you have removed it in the second.
This error causes the script to stop execution before the line which sets the on change event.

So in short remove the 2 event lines from your code and it should work 🙂 (and also the (document).ready(function () { from the fragment as you are already in a (document).ready statement)

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Hello Vladimir, thanks for your answer.

So, I changed my code, and I add a ” ; “missing.
But, the I still have the same problem…
I used a HTML, and javascript validator, but no problem detected…

                // create jqxcalendar.
                $("#jqxWidget").jqxCalendar({width: 220, height: 220});
                $('#jqxCalendar').on('change', function (event) {
                var date = $('#jqxCalendar').val();
                var url = ("0" + date.getDate()).slice(-2) + '-' + ("0" + (date.getMonth()+1)).slice(-2) + '-' + date.getFull
Year() + '.html';
                // reload chart with generated url here
                        window.location = url;
                                                                                                                             
});

[VladimirParticipant]

Hello brogen,

You also need to decide on the name of the widget div.
You are creating a Calendar at the div with id=’jqxWidget’ and then trying to set on change event on a widget with id=’jqxCalendar’, which also does not exist in your new code, so either change the code to:

               // create jqxcalendar.
                $("#jqxWidget").jqxCalendar({width: 220, height: 220});
                $('#jqxWidget').on('change', function (event) {
                var date = $('#jqxWidget').val();
                var url = ("0" + date.getDate()).slice(-2) + '-' + ("0" + (date.getMonth()+1)).slice(-2) + '-' + date.getFull
Year() + '.html';
                // reload chart with generated url here
                        window.location = url;
                                                                                                                             
});

or rename the <div id='jqxWidget'> to <div id='jqxCalendar'> and change the code to:

               // create jqxcalendar.
                $("#jqxCalendar").jqxCalendar({width: 220, height: 220});
                $('#jqxCalendar').on('change', function (event) {
                var date = $('#jqxCalendar').val();
                var url = ("0" + date.getDate()).slice(-2) + '-' + ("0" + (date.getMonth()+1)).slice(-2) + '-' + date.getFull
Year() + '.html';
                // reload chart with generated url here
                        window.location = url;
                                                                                                                             
});

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Oh… yes ! It was so obvious… Not for me, because i’m a beginner on html/javascript code…

I have a problem, but it looks it’s the last one ^^.

After clicking on “choisir une date” it directly open the new page today_date.html…

I tried to change the event from “change” to “viewChange” but the problem is the same.

[VladimirParticipant]

Hello brogen,

When do you want it to open?
If it is on window close, or on some button you should assign the window.location call to the appropriate action.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Hello Vladimir.

I want open the calendar, wich is on jqxwindow, after click on “choisir une date”
After, when I click on a date, then, only at this moment, I want open the new page, with the generated link.

So, if write, the calendar is open at the same time as the page. Then, when I click on a date, it open the new page “date.html” :

$("#jqxwindow").jqxWindow({
    autoOpen: true

But, if the autoOpen is on false, it directly open today.html when I open the jqxWindow…

Regards

[VladimirParticipant]

Hello brogen,

It seems that the change event fires for the initial setup of the date.
What you can do is add the calendar change event handler inside the open procedure, and remove it in the close to prevent duplicate handlers.
Here is how it will look like:

           $("#jqxwindow").jqxWindow({
                height: 260,
                width: 230,
                autoOpen: false
            });
            $("#button_open").click(function () {
                $("#jqxwindow").jqxWindow('open');
                $('#jqxCalendar').on('change',  function (event) {	
                    var date = $('#jqxCalendar').val();
                    var url = ("0" + date.getDate()).slice(-2) + '-' + ("0" + (date.getMonth()+1)).slice(-2) + '-' + date.getFullYear() + '.html';
                    // reload chart with generated url here
                    window.location = url;
                });
            });
            $("#button_close").click(function () {
                $('#jqxCalendar').off('change')
                $("#jqxwindow").jqxWindow('close');
            });
        // create jqxcalendar.
        $('#jqxCalendar').jqxCalendar({width: 220, height: 220});

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[brogenParticipant]

Oh yes !

Elementaire mon cher Watson

I can now finish my project. Know, it’s time to bash script ^^.

🙂 thanks for all !!!

[Author]

Posts