Loading...

Search jQuery

Search

jQuery Forum

Using jQuery UI

bastiaan

Is there a easy or quick way to add dates to highlight in jquery datepicker?

in Using jQuery UI • 5 months ago

Right now i add dates like example and it works fine but i have to edit the script every time.

var highlight_days = new Array("10/01/2013", "21/01/2013", "12/01/2013");
beforeShowDay: function(highlight_days) {...

Is there a easy and quick way to add new dates ?

1

Replies(32)

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

You can get them from a database via getJSON, via a different script.

Where will the dates come from?

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Thanks Jake!

The dates are planned by us on weekly and monthly bases depending on which season.
I'd like to find a way that not only me but also a few other people can set the dates.

On "stackoverflow" I saw a possibility to set the dates in Google Calendar what I liked but that's beyond my knowledge.

ps I'm a newbie who wants to learn so if you have some tools/ tips to start with...

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Simplest way is to make a JavaScript file with just the days in it.

var highlight_days = ["10/01/2013", "21/01/2013", "12/01/2013"];

Or still easy with JSON

["10/01/2013", "21/01/2013", "12/01/2013"]

Of course hooking it into a calendar system would make it easier for "an assistant" to keep the dates up-to-date. And only a bit more difficult to program. Do you use Google Calendar already, or some other calendar software?

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Thanks again,

Last week I activated a "Google Apps for Business" free-account and therefore I choose Google calendar.

And I was thinking that it would be something like: "if a date in google calendar contains the word "booked" then color the datepicker background red " and "if date contains the word "special" then "border: blue".

If there is a posibility to give me a start with this or a other/ better way?

Bastiaan

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Let’s start by figuring out the URL for your calendar. I don’t use Google Apps for Business Calendar.

This SO question shows how to get the info.

http://stackoverflow.com/questions/8995329/google-calendar-json-not-ordered-by-date

I see an Array of entries @ data.feed.entry where each entry has an entry.gd$when and entry.title

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Jake,

Thanks again.

Our calendar is not public so I think I have to work with an "API" and that means.... reading and learning first.

https://developers.google.com/google-apps/calendar/get_started

Thanks for your time!

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

If the calendar is not public, how would your users read it? With passwords?? Google login credentials?

It sounds like a lot of work for a few dates.

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

The front datepicker is public but my google calendar isn't.

On my google calendar I can make "normal" apointments and "all day" apointments which i like to use for my project.

When i add "booked" or "promotion" in the "all day" area, the color of my datepicker has to change.

<td class="st-c">
<div class="st-c-pos">
<div class="ca-evp2718 rb-n" style="border:1px solid #4DB810;color:#1d1d1d;background-color:#dc2127">
<div class="rb-ni">
<span class="evt-lk ca-elp2718">Sorry we're all booked</span>
</div>
</div>
</div>
</td>

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Either the datepicker has to access the calendar via google calendar APIs (password) or via a static copy of the calendar derived from a server side process.

If you can’t share a 'feed' from your calendar, jQuery can not process the data.

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Thank you.

I will try to find a way to use the Google calendar APIs and connect my datepicker to the calendar.

I found this on stackoverflow:
http://stackoverflow.com/questions/9447449/simple-calendar-reservation-display-using-google-calendar-feed

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

I have set up a google calendar, publicly shared my calendar, and am working with a JSONP feed to populate busy days.

Will you publicly share your calendar?

PS that SO post has no value. it shows no code.

JΛ̊KE

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

http://home.jejaju.com/play/gcal.html uses my google calendar and does not allow the user to select any date I have an all day event.

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

My calendar is not public because it becomes my bussiness apointments calendar.

If the intergration is not possible I can add a calendar especialy for this project and make that one public.

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Cool!

I have your calendar script running on my testsite! Now i have to test it on my own calendar!

Let you know!

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

My styles won’t be like your styles (pancake day and waffle day), But I think you will get the idea.

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

its working!!!!!!!!!

Two more things and thanks to you I have a working calendar!!!

1) multiple days selection: from date to date

2) for example: waffle : change background color and not selectable.
pancake: change border color and still selectable.

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Multiple dates could be implemented in the getJSON callback, and different selectable rules would be implemented in the beforeShowDay callback. You should try writing the code.

JΛ̊KE

PS I updated my example.

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

thanks a lot

Tomorrow I wil try to write the code. When it's working i will let you know.

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

It is working perfectly!

I changed a little on the script. (entry.title to entry.content) except for the last one. Now i can put and combine the "css keyword(s)" in the content box and it displays the title in the date hover pop up (PS can I style this pop up like a tooltip?).

The final step is to use APIs and make my calendar private again. ( hopefully it's working with this scrip )

The moment my website is online I will send my URL

@jakecigar many thanks!

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Hello,

I can't figure out why the highlighted days not showing up (only after selecting a date) in an inline calendar on page-load.

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Inline calendars render before the JSON is loaded. You could rearrange the code to make it work.

$.getJSON(url,function(data){
$.each(data.feed.entry,function(i,entry){
var selectable = !! entry.title.$t.match(/pancake/i)
for (var i=entry.gd$when[0].startTime;i<entry.gd$when[0].endTime;i=nextDate(i)){
dates[i]=[selectable,entry.title.$t.toLowerCase(),entry.title.$t]
}
})
$(function(){
$(".datepicker").datepicker({
beforeShowDay:function(date){
return dates[$.datepicker.formatDate($.datepicker.ATOM,date)]||[true,"",""]
}
});
})
})

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Thanks for the answer. I didn't know about the rendering sequence and accidentally found the answer.

It's working perfect but if you got time please let me know if it is "a big mess script working" or a step in the right direction??

This is my datepicker script write now.

// google calendar data
    var url="http://www.google.com/calendar/feeds/"+
                "example@mywebsite.com"+
                "/public/full?"+
                    "alt=json-in-script&"+
                    "orderby=starttime&"+
                    "sortorder=ascending&"+
                    "futureevents=true&"+
                    "callback=?"
    var dates={}
    function nextDate(date){
        var next=$.datepicker.parseDate($.datepicker.ATOM,date)
        next.setDate(next.getDate()+1)
        return $.datepicker.formatDate($.datepicker.ATOM,next)
    }

// GOOGLE JSON BEGIN
    $.getJSON(url,function(data){
        $.each(data.feed.entry,function(i,entry){
    //        console.log(entry)
            var selectable = !! entry.content.$t.match(/select/i)
    //    console.log(selectable,entry.content.$t,entry.gd$when[0].startTime,entry.gd$when[0].endTime)
                 for (var i=entry.gd$when[0].startTime;i<entry.gd$when[0].endTime;i=nextDate(i)){
                     dates[i]=[selectable,entry.content.$t.toLowerCase(),entry.title.$t]
                 }
        })
    //    console.log(dates)


        var opts = {
        beforeShowDay:function(date){
        return dates[$.datepicker.formatDate($.datepicker.ATOM,date)]||[true,"",""]    },
        dateFormat: "dd/mm/yy",
        dayNamesMin: ,
        minDate: '+0D',
        maxDate: '+2Y',
        };

        var opts_home = {
        beforeShow: function() {appendText();},
        onChangeMonthYear: function(year, month, inst) {appendText();},
        numberOfMonths: 2,
        showOn: "both",
        buttonImage: "/img/datepicker-icon.png",
        buttonImageOnly: true,
        buttonText: "Select date",
        };

        var opts_form = { numberOfMonths: 1 };

    $('#to').datepicker($.extend({}, opts, opts_home));

    jQuery("#from").datepicker($.extend({
        onSelect: function(selectedDate) {
            var fromDate = jQuery("#from").datepicker("getDate");
            fromDate.setDate(fromDate.getDate() + 7);
            jQuery("#to").datepicker("option", "minDate", fromDate);
        }
    }, opts, opts_home));

    $('#alt-to').datepicker($.extend({}, opts, opts_form));

    jQuery("#alt-from").datepicker($.extend({
        onSelect: function(selectedDate) {
            var fromDate = jQuery("#alt-from").datepicker("getDate");
            fromDate.setDate(fromDate.getDate() + 7);
            jQuery("#alt-to").datepicker("option", "minDate", fromDate);
        }
    }, opts, opts_form));

    $("#from").datepicker('setDate', new Date());

});// GOOGLE JSON END

    $('#from, #to, #alt-from, #alt-to,.days ').change(selector);

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

The code could probably be shortened by 10-15%. But it’s probably not worth it, if it works.

What you pasted is not complete. Missing functions (appendText) . Invalid dayNamesMin in opts.

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Thank you for looking at the script.

I am aware of the missing part. My mistake, I was changing, trying an copying at the same time.

For the past 9 hours I am surging for an answer and hopefully you can help me again (still)?

I want to "altField" on an "inline" datepicker.

I know how to set it from:

<div id="inline_date"></div> to <input type="text" id="inline_date_value"/>

But now also the other way arround??

<input type="text" id="inline_date_value" class="datepicker"/> to <div id="inline_date"></div>

Is this possible?

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

http://api.jqueryui.com/datepicker/#option-defaultDate should fill in a date from another place. Is that what you need?

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

to be honest... I really don't know haha

This is the script I am using to get the date(s) from the homepage and set them on the reservation page.

When I display the datepickers:

<input id="alt-from" type="text"/>

it's working. But when I put the datepicker "inline"

<div id="alt-from" ></div>

it does not work.

// HOMEPAGE START QueryString
    $("#GO").click(function() {
        var date_from = $("input#from").val();
        var date_to = $("input#to").val();
        var date_days = $("input.days").val();

        value = "f=" + date_from + "&t=" + date_to + "&d=" + date_days;
        location.href = "http://localhost/testzone/webtest/bookform.html/?" + value;

    });

    $.QueryString = (function(a) {
        if (a == "")
            return {};
        var b = {};
        for (var i = 0; i < a.length;++i) {
            var p = a[i].split('=');
            if (p.length != 2)
                continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'))

        var date_from = $.QueryString["f"]
        var date_to = $.QueryString["t"]
       var date_days = $.QueryString["d"]

//--> this works perfect as long the datepicker is not display "inline"
// $('#alt-from').val(date_from);
//    $('#alt-to').val(date_to);
//    $('.days').val(date_days);

THIS IS WHAT I CAME UP WITH:
$('#alt-from').datepicker({defaultDate: new Date (date_from)});
$('#alt-to').datepicker({defaultDate: new Date (date_to)});
$('.days').datepicker({defaultDate: new Date (date_days)});

// END QueryString

Thanks

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

This is the syntax for initializing a datepicker @ certain dates.

$('#alt-from').datepicker({defaultDate: new Date (date_from)});

$('#alt-to').datepicker({defaultDate: new Date (date_to)});

$('.days').datepicker({defaultDate: new Date (date_days)});

To set an existing datepicker (already initialized) to a date you use

$('#alt-from') .datepicker( "option", "defaultDate", new Date (date_from) );
// …

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

I think something is wrong in my script.
When I use:

$('#alt-from') .datepicker( "option", "defaultDate", new Date (date_from) );

and:

<input type="text" id="alt-from"/> or <div id=""alt-from"></div>

I don't get a calendar "on-click" or "inline"

But when I leave:

"option", "defaultDate", new Date (date_from) so just $('#alt-from') .datepicker( );

It gives me a plain calendar

The console.log(date_from) gives me a correct value.

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

I updated my demo to

$(function(){
console.log(dates)
var date=$("#alternate").val()
$("#datepicker").datepicker({
beforeShowDay:function(date){
return dates[$.datepicker.formatDate($.datepicker.ATOM,date)]||[true,"",""]
},
onSelect: function(dateText, inst) {
alert(dateText)
},
altField: "#alternate",
// defaultDate: $("#alternate").val()
});
$("#datepicker").datepicker("setDate",date)
})
})

<input type="text" name="alternate" id="alternate" value="12/22/2012" />
<div id="datepicker"/>

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

There was something wrong with my script because the example didn't work at all on my site.

But I removed everything and used your example as a base, put everything in order and it works but...

When I open the page the <input id="alternate"> "get" the date from a "queryString" and "set" the <div id="datepicker"></div> perfectly.

Now I attached a datepicker also on the "alternate" ... still works.

When I change the date in the "inline (datepicker)" the date will change also the date in the "input (alternate")" but not the other way around???

// START DATEPICKER SETTINGS
$(function() {
        $.datepicker.setDefaults({
        beforeShowDay:function(date){
        return dates[$.datepicker.formatDate($.datepicker.ATOM,date)]||[true,"",""]    },
        dateFormat: 'dd-mm-yy',

});//END FUNCTION

$(function(){


            var dateFrom=$("#alt_f").datepicker({numberOfMonths: 2}).val();
            var dateTo=$("#alt_t").datepicker({numberOfMonths: 2}).val();



            $("#alt-from").datepicker({
                numberOfMonths: 1,
                altField: "#alt_f",
                onSelect: function(selectedDate) {
                var fromDate = $("#alt-from").datepicker("getDate");
                fromDate.setDate(fromDate.getDate() + 7);
                $("#alt-to").datepicker("option", "minDate", fromDate); },
                });

            $("#alt-from").datepicker("setDate",dateFrom);



            $("#alt-to").datepicker({
                numberOfMonths: 1,
                altField: "#alt_t",
                });

            $("#alt-to").datepicker("setDate",dateTo);


        })

jakecigar

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

I am a bit confused here. You want an inline date picker & the alt field synchronized. But you also want the alt field to have a date picker?????

I updated my demo to synchronize with

$("#alternate").change(function(){
$("#datepicker").datepicker("setDate",$(this).val())
})

to set the date picker when a date is typed into the alternate.

JΛ̊KE

Bastiaan

Re: Is there a easy or quick way to add dates to highlight in jquery datepicker?

5 months ago

Thank you al lot! It's working.