Migrating from YAHOO.widget.Calendar to dojo DateTextBox

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Migrating from YAHOO.widget.Calendar to dojo DateTextBox

Kevin Hale Boyes
Hi all,

I'm in the process of migrating my application from YAHOO YUI framework to dojo.
We're on version 2.9 of YUI and are moving to dojo 1.10.4 (I know it's not the latest, sorry).

The piece I'm currently working on is moving from YAHOO.widget.Calendar to dojo DateTextBox.
I've run into something that I don't know how to do and was hoping someone here could help.

YUI Calendar allows us to customize the cell contents of the calendar.
For example, we can change the colour of a particular day in the calendar while keeping the others unchanged.
Or we can disable selection of particular dates if they're not allowed in the application.

We do that using the addRenderer() function on the calendar.
I'm not sure if images will come through but here is what it looks like:
Inline images 2

In case the image isn't shown, we have a standard calendar picker displayed with a few of the day cells coloured green.
In addition, they are the only ones that are selectable.

So, my question is, is there any way to disable certain dates and render others specially when using the DateTextBox?

Thanks,
Kevin

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Migrating from YAHOO.widget.Calendar to dojo DateTextBox

mello151
Hi Kevin,

So, to differentiate between valid and invalid dates you'll need to set the 'rangeCheck' property on DateTextBox:

new DateTextBox({

    // For example, make weekends invalid
    rangeCheck: function(value) {
       if (value.getDay === 0 || value.getDay() === 6 {
          return false;
       }
       return true; // other days are valid
     }

Then for the colors on valid days you'll need to look at the CSS classes. I'm not 100% on the class name but it should be something like:  .dijitCalendarEnabledDate

So,

.dijitCalendarEnabledDate {
    background-color:  light-green; // or something aesthetically pleasing....
}

Hope that helps :)

-mel

On Wed, May 24, 2017 at 11:00 AM, <[hidden email]> wrote:
Send Dojo-interest mailing list submissions to
        [hidden email]

To subscribe or unsubscribe via the World Wide Web, visit
        http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
or, via email, send a message with subject or body 'help' to
        [hidden email]

You can reach the person managing the list at
        [hidden email]

When replying, please edit your Subject line so it is more specific
than "Re: Contents of Dojo-interest digest..."


Today's Topics:

   1. Migrating from YAHOO.widget.Calendar to dojo      DateTextBox
      (Kevin Hale Boyes)


----------------------------------------------------------------------

Message: 1
Date: Tue, 23 May 2017 12:57:07 -0600
From: Kevin Hale Boyes <[hidden email]>
Subject: [Dojo-interest] Migrating from YAHOO.widget.Calendar to dojo
        DateTextBox
To: [hidden email]
Message-ID:
        <[hidden email]>
Content-Type: text/plain; charset="utf-8"

Hi all,

I'm in the process of migrating my application from YAHOO YUI framework to
dojo.
We're on version 2.9 of YUI and are moving to dojo 1.10.4 (I know it's not
the latest, sorry).

The piece I'm currently working on is moving from YAHOO.widget.Calendar to
dojo DateTextBox.
I've run into something that I don't know how to do and was hoping someone
here could help.

YUI Calendar allows us to customize the cell contents of the calendar.
For example, we can change the colour of a particular day in the calendar
while keeping the others unchanged.
Or we can disable selection of particular dates if they're not allowed in
the application.

We do that using the addRenderer() function on the calendar.
I'm not sure if images will come through but here is what it looks like:
[image: Inline images 2]

In case the image isn't shown, we have a standard calendar picker displayed
with a few of the day cells coloured green.
In addition, they are the only ones that are selectable.

So, my question is, is there any way to disable certain dates and render
others specially when using the DateTextBox?

Thanks,
Kevin
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-interest/attachments/20170523/8113ff17/attachment.html
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 12029 bytes
Desc: not available
Url : http://mail.dojotoolkit.org/pipermail/dojo-interest/attachments/20170523/8113ff17/attachment-0001.png

------------------------------

________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest



End of Dojo-interest Digest, Vol 149, Issue 16
**********************************************


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Migrating from YAHOO.widget.Calendar to dojo DateTextBox

Kevin Hale Boyes
Mel,

Thank you very much for the help.
It looks like what I need.
Unfortunately, not long after I sent the question, I was pulled to work on something else and it doesn't appear that I'm going to come back to the migration any time soon.
I'm sure your answer will help the next person to pick this up.

Thanks again,
Kevin. 
 

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest