Calendar

A calendar control. The calendar displays the dates of a month with the selected date highlighted. The user can move to the previous or next month and click on a date to select it. When a date is selected the dateChanged message is sent.

Mark Smith - Dec 2nd, 2020
Is it possible to use this widget with the popup command? And if so, how do you specify the coordinates that the popped-up widget will occupy? Thanks
Elanor Buchanan - Dec 3rd, 2020
Hi Mark Yes, you can use the popup widget command. This command takes a widget kind rather than a specific widget on your stack so if you want to set any properties of the widget that is popped up you can pass a properties array to the command. on mouseUp put "0,0,150,150" into tProps["rect"] popup widget "com.livecode.widget.calendar" at the mouseLoc with tProps end mouseUp I hope that helps. Elanor
Mark Smith - Dec 8th, 2020
Thanks Elanor. I have it working as far as popping up in the size, style and on the date I want, but then the calendar is frozen. The arrows left/right do not change the month and clicking on a new date does not do anything. I feel like I am missing a handler, but I don't know which one and where to put it. PS so here is a specific question for you. Is there a way to add code to the actually widget that is popped up? I could code its functionality that way, but what is odd is that when you drag a calendar widget onto a card the left/right arrows respond immediately (no coding req'd) but when it pops up that doesn't happen. Much still to learn :) Thanks
Mark Smith - Dec 18th, 2020
Hi Elanor, thanks for the suggestion re: using a group. It worked perfectly, especially on iOS where this was destined. A bonus is that groups have their own image effects so I was able to add drop shadow and make it look just like the desktop popup. Also, you can add your own "oversize" left/right arrow buttons to the group which solves the problem of the original arrow keys being a tad too small to click on easily. I think it has turned out to be a very versatile tool that looks great on mobile and desktop. Super thanks.
Jeremiah Jones - Oct 31st, 2020
Question: The widget doesn't highlight the selected date until I set the highlight property to "background" or "text" inside the property inspector. It will go to the proper month, but the date is not highlighted until I select either "text" or "background." How can I get it to highlight the selected date right out of the box?
Jeremiah Jones - Oct 31st, 2020
UPDATE: Nevermind. Figured it out. "Background" and "Text" is case sensitive. Using lower cases causes the widget to select a date, but not highlight it. Very handy widget! Thanks!
Stam Kapetanakis - Oct 22nd, 2020
I can't get this to install -- have put into the default 'extensions' folder but it doesn't show up in the tools palette or menu on restart. I have found that some plugins require a 'plugins' folder in the same directory that contains the 'extensions' folder.. putting it there any advice?
Stam Kapetanakis - Oct 22nd, 2020
just realised this should be installed by clicking the '+' in the Tools > Extension Manager... doh :)
Per Bodelius - Apr 17th, 2019
Hi! I use the Calendar widget in an IOS app and it´s really working fine. But when changing month with the arrow buttons it sometimes seems to be a small time delay (some seconds). Maybe it´s just because the arrows are very small. Are there any possibility to make this arrows a bit bigger?
Elanor Buchanan - Apr 29th, 2019
Hi, at the moment the size of the arrows is relative to the size of the widget. You could create a customised version of the calendar widget with larger arrows. You would just need to modify the DrawHeader handler. You can find a more about modifying an existing widget in this lesson http://lessons.livecode.com/m/4071/l/1005132-how-do-i-modify-a-livecode-widget I hope that helps. Kind regards, Elanor
Massimiliano Vessi - Nov 26th, 2018
It doesn't work on 9.0.2rc1. It doesn't appear on the tool palette. The extension manager shows a wrench icon.
Lemuel Dizon - Nov 23rd, 2018
i can't download the calendar widget is there a problem in download now button?
Elanor Buchanan - Nov 23rd, 2018
Hi, I just tried to download the extension it worked ok here. Could you let us know what browser you are using so we can check? Thank you. Elanor
Lemuel Dizon - Nov 28th, 2018
hi elanor thanks for the reply i'm using firefox.
Michael Hasbrook - Oct 11th, 2018
The problem i have found is that the format of the calendar is yyyy-mm-dd. It appears this format does not convert to any other date using the LC commands.
Elanor Buchanan - Oct 12th, 2018
Hi Michael, I'm glad you found the widget useful. You could write a small function to convert the date to dateItems and then to your preferred format. function formatDate pDate // Convert the date to dateItems replace "-" with comma in pDate put ",0,0,0,0" after pDate // Convert the date convert pDate to long date // Return the converted date return pDate end formatDate Kind regards Elanor
Klaus Major - Sep 12th, 2018
Just downloaded the widget and installed if on LC 9.01. Great work, but there is no icon in the TOOLS palette, just a generic string "Widget"!? Of couse it would even be nicer if SUNDAY would be displayed in another color and if we could design/supply our own NEXT/PREV month "Buttons". I think this should be bundled with every installation of LC! And please do some clean-up in the Widget-store! "Big square" and "My pink circle"? Come on! :-D The SVG widget is already bundled with LC!
Klaus Major - Sep 14th, 2018
I found that we cannot change "WeekStartsOn" to monday, like in BN old widget. This way it is hardly usable in e.g. Germany... :-/
Elanor Buchanan - Oct 12th, 2018
Hi Klaus Thanks for your comments, we'll get the widget updated with an icon and I'll pass on your comments about cleaning up the widget store. A 'WeekStartOn' property is a good idea, there is a comment below about the same thing. It should be relatively easy to take the widget source and add another property to control this, or just build your own customised version of the calendar widget where the week starts on Monday as described in the reply to Xavier. Kind regards Elanor
Kim XXX - Aug 14th, 2018
Excellent widget. Saved me a couple of days work. Is there a way that, within the widget, I could restrict the range of date values that the user can see & select (e.g. today's date plus/minus 60 days)?
Elanor Buchanan - Aug 21st, 2018
Hi Kim, I'm glad you found the calendar useful. There is not currently a way to restrict the range of dates shown but you could add this to the widget by editing the LCB source. You could add a property to define the allowed range and then update the fillDates and setSelectedDate handlers to take the allowed range into account. I hope that helps. Elanor
Kim D - Aug 27th, 2018
Thanks Elanor. Sounds like an opportunity to learn about LCB. I'll give it a go.
Elanor Buchanan - Aug 27th, 2018
Good luck, let us know how you get on!
Xavier Garcia Eroles - Jul 22nd, 2018
A very good and practical widget but, what if the first day of the week is monday?
Elanor Buchanan - Jul 25th, 2018
Hi Xavier, thank you for your comment. You could create your own version of the Calendar, starting on a Monday, quite easily. You would just need to make a change to the Calendar Support library. It has a handler, DayOfDate, that works out of day of the week of a given date and returns a number between 1 and 7. Currently 1 = Sunday but this could be changed so 1=Monday. You can change the dayNames property in the Property Inspector for the Calendar widget. With the Calendar widget installed you can find the LCB source for the widget and support library in your My LiveCode/Extensions/com.livecode.widget.calendar.1.0.0. Change the identifier and author of the widget, make any other changes and then test, build and install your version using the Extension Builder. I hope that helps. Elanor

Calendar

Type

widget

Summary
A calendar control. The calendar displays the dates of a month with the selected date highlighted. The user can move to the previous or next month and click on a date to select it. When a date is selected the dateChanged message is sent.
Description

A calendar control. The calendar displays the dates of a month with the selected date highlighted. The user can move to the previous or next month and click on a date to select it. When a date is selected the message is sent.

dateChanged

Type

message

Syntax
on dateChanged pDate
Summary
Sent when a date is selected.
Parameters
Name Type Description
pDate The selected date in the form YYYY-MM-DD.
Description

The message is sent when a date in the calendar is clicked. The parameter gives the selected date in the form YYYY-MM-DD.

dayNames

Type

property

Syntax
get the dayNames of widget
set the dayNames of widget to pDayNames
Summary
Sets the day names to be displayed as headers in the Calendar.
Value
Name Type Description
value A comma-delimited list of day names.
Description

Sets the day names to be displayed as headers in the Calendar.

monthNames

Type

property

Syntax
get the monthNames of widget
set the monthNames of widget to pMonthNames
Summary
Sets the month names to be used when displaying the selected month in the Calendar header.
Value
Name Type Description
value A comma-delimited list of month names.
Description

Sets the month names to be used when displaying the selected month in the Calendar header.

selectedDate

Type

property

Syntax
get the selectedDate of widget
set the selectedDate of widget to pDate
Summary
Sets the selected date of the calendar. Shows the correct month and highlights the selected date.
Value
Name Type Description
value A string in the form “YYYY-MM-DD”
Description

Sets the selected date of the calendar. Shows the correct month and highlights the selected date.

headerColor

Type

property

Syntax
get the headerBackround of widget
set the headerBackround of widget to pColor
Summary
The background color of the Calendar header.
Value
Name Type Description
value A RGB color.
Description

The is used to set the background color of the Calendar header bar.

hiliteStyle

Type

property

Syntax
get the hiliteStyle of widget
set the hiliteStyle of widget to [ Text | Background ]
Summary
The style with which selected dates are highlighted.
Value
Name Type Description
value The hilite style

  • “Text”: the text color of the selected date is changed.
  • “Background”: the background color of the selected date is changed.
Description

The is used to set the jighlight style of the selected date.