2. Home
  3. Articles
  4. CRM
  5. Zoho
  6. Zoho Creator: Radio group into Calendar Carousel

For Zoho Services only:


I'm actually part of something bigger at Ascent Business Solutions recognized as the top Zoho Premium Solutions Partner in the United Kingdom.

Ascent Business Solutions offer support for smaller technical fixes and projects for larger developments, such as migrating to a ZohoCRM.  A team rather than a one-man-band is always available to ensure seamless progress and address any concerns. You'll find our competitive support rates with flexible, no-expiration bundles at https://ascentbusiness.co.uk/zoho-services/uk-zoho-support.  For larger projects, talk to our experts and receive dedicated support from our hands-on project consultants at https://ascentbusiness.co.uk/zoho-services/zoho-crm-implementation.

The team I manage specializes in coding API integrations between Zoho and third-party finance/commerce suites such as Xero, Shopify, WooCommerce, and eBay; to name but a few.  Our passion lies in creating innovative solutions where others have fallen short as well as working with new businesses, new sectors, and new ideas.  Our success is measured by the growth and ROI we deliver for clients, such as transforming a garden shed hobby into a 250k monthly turnover operation or generating a +60% return in just three days after launch through online payments and a streamlined e-commerce solution, replacing a paper-based system.

If you're looking for a partner who can help you drive growth and success, we'd love to work with you.  You can reach out to us on 0121 392 8140 (UK) or info@ascentbusiness.co.uk.  You can also visit our website at https://ascentbusiness.co.uk.

Zoho Creator: Radio group into Calendar Carousel

Zoho
Hits: 3675
What?
Another article on styling a radio group to become a weekly calendar carousel. In that a radio group displays the days of the week with arrows allowing the user to select the next or previous week. This is a follow on from my other articles on restyling Creator: Zoho Creator: Change Radio into Tabs and Zoho Creator: Decision Box into a Button.

Why?
We can't include JavaScript in a ZohoCreator app without building a JS Widget or using Nodejs... Or we can make do with the tools provided. The brief was similar to the Zoho Bookings interface where their Creator app is to present the user with the days of the week which they can then click on to select a particular day. Some navigation is required in the form of a left arrow and right arrow to see previous or next weeks respectively.

What I have:
Zoho Creator: Radio Group into Calendar Carousel: Boring Radio Group

What I want:
Zoho Creator: Radio Group into Calendar Carousel: Pretty Calendar Week Carousel

How?
This was achieved using some CSS and then some Deluge for the functionality. Let's dig into the CSS and then I'll explain how we made this functional.

To prepare for this, I created the following Creator form:
Zoho Creator: Radio Group into Calendar Carousel: the Creator form
    The fields:
  • Calendar Day Select (link name: Calendar_Day_Select || type Radio)
  • Form CSS (link name: Form_Css || type Add Notes)
  • Selected Value for debugging (link name: Selected_Value || type Single line)
  • Starting Date (link name: Starting_Date || type Date)
  • Selected Date (link name: Selected_Date || type Date)

The CSS
So first of all the value of each radio item will be populated using deluge and what's important to note here is that each picklist/dropdown option includes some HTML, specifically a SPAN tag surrounding the date number (eg. "Wednesday<span>9</span>March"), which yields the following:
Zoho Creator: Radio Group into Calendar Carousel: Css 1

Then I get rid of the label with the following CSS:
copyraw 
label.zc-Calendar_Day_Select-label{display:none !important;}
  1.  label.zc-Calendar_Day_Select-label{display:none !important;} 
Zoho Creator: Radio Group into Calendar Carousel: Css 1

Then get rid of the round circles for radio inputs / and ensured the cursor remained as a hand to indicate clickable:
copyraw 
div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(2){display:none;}
div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){cursor:pointer;}
  1.  div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(2){display:none;} 
  2.  div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){cursor:pointer;} 
Zoho Creator: Radio Group into Calendar Carousel: Css 1

Then I formatted the color of the text and set the general text font to be applied overall / included tweak to width so "Wednesday" will not wrap:
copyraw 
div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){display:block;font-size:10pt;color:#ccc;text-align:center;}
div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){width:75px;}
  1.  div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){display:block;font-size:10pt;color:#ccc;text-align:center;} 
  2.  div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){width:75px;} 
Zoho Creator: Radio Group into Calendar Carousel: Css 1

Then I format the value within the span to make the date more prominent:
copyraw 
div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3) span{display:block;font-size:20pt;font-weight:bold;color:#fff;background-color:#ccc;text-align:center;padding-bottom:5px;}
  1.  div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3) span{display:block;font-size:20pt;font-weight:bold;color:#fff;background-color:#ccc;text-align:center;padding-bottom:5px;} 
Zoho Creator: Radio Group into Calendar Carousel: Css 1

I want to highlight the current selection so I'll make this a different color (hot pink):
copyraw 
div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3)[elname='radioEl_zc-Calendar_Day_Select_2'] span{background-color:#FF1493 !important;}
  1.  div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3)[elname='radioEl_zc-Calendar_Day_Select_2'] span{background-color:#FF1493 !important;} 
Zoho Creator: Radio Group into Calendar Carousel: Css 1

Then I want to align these boxes horizontally and not vertically:
copyraw 
div.zc-Calendar_Day_Select .choice-table-cell{float:left}
div.zc-Calendar_Day_Select .choice-table-row{float:left}
  1.  div.zc-Calendar_Day_Select .choice-table-cell{float:left} 
  2.  div.zc-Calendar_Day_Select .choice-table-row{float:left} 
Zoho Creator: Radio Group into Calendar Carousel: Css 1

And finally, I want to make the chevrons (less than and greater than sign) massive:
copyraw 
div.zc-Calendar_Day_Select .choice-table-cell span label[elname='radioEl_zc-Calendar_Day_Select_1']{font-size:65px}
div.zc-Calendar_Day_Select .choice-table-cell span label[elname='radioEl_zc-Calendar_Day_Select_9']{font-size:65px}
  1.  div.zc-Calendar_Day_Select .choice-table-cell span label[elname='radioEl_zc-Calendar_Day_Select_1']{font-size:65px} 
  2.  div.zc-Calendar_Day_Select .choice-table-cell span label[elname='radioEl_zc-Calendar_Day_Select_9']{font-size:65px} 
Zoho Creator: Radio Group into Calendar Carousel: Css 1

Awesome! Looking good!

the Deluge
Not just a pretty face, let's make this functional. First of all, make sure you set up a form with the fields I mentioned earlier in the Creator form. Here's the code which should happen when the form containing this radio field loads up:
copyraw 
//
// initial CSS (hide element while it is styled)
input.Form_Css = "<style>div.zc-Calendar_Day_Select-group{display:none}</style>";
//
// set initial hidden date field
input.Selected_Date = zoho.currentdate;
input.Starting_Date = zoho.currentdate;
//
// set the values for the calendar select field
clear Calendar_Day_Select;
input.Calendar_Day_Select:ui.add("&lt;");
for each index v_DateIndex in {1,2,3,4,5,6,7}
{
	input.Calendar_Day_Select:ui.add(zoho.currentdate.addDay(v_DateIndex).toString("EEEE") + "<span>" + zoho.currentdate.addDay(v_DateIndex).toString("d") + "</span>" + zoho.currentdate.addDay(v_DateIndex).toString("MMMM"));
}
input.Calendar_Day_Select:ui.add("&gt;");
//
// default selected to current date (triggers the next code snippet / workflow on user input of "calendar day select")
v_PreselectedValue = zoho.currentdate.toString("EEEE") + "<span>" + zoho.currentdate.toString("d") + "</span>" + zoho.currentdate.addDay(v_DateIndex).toString("MMMM");
input.Calendar_Day_Select = v_PreselectedValue;
//
// hide (comment this out if you are still debugging)
hide Hidden_Fields;
  1.  // 
  2.  // initial CSS (hide element while it is styled) 
  3.  input.Form_Css = "<style>div.zc-Calendar_Day_Select-group{display:none}</style>"; 
  4.  // 
  5.  // set initial hidden date field 
  6.  input.Selected_Date = zoho.currentdate; 
  7.  input.Starting_Date = zoho.currentdate; 
  8.  // 
  9.  // set the values for the calendar select field 
  10.  clear Calendar_Day_Select; 
  11.  input.Calendar_Day_Select:ui.add("&lt;"); 
  12.  for each index v_DateIndex in {1,2,3,4,5,6,7} 
  13.  { 
  14.      input.Calendar_Day_Select:ui.add(zoho.currentdate.addDay(v_DateIndex).toString("EEEE") + "<span>" + zoho.currentdate.addDay(v_DateIndex).toString("d") + "</span>" + zoho.currentdate.addDay(v_DateIndex).toString("MMMM")); 
  15.  } 
  16.  input.Calendar_Day_Select:ui.add("&gt;"); 
  17.  // 
  18.  // default selected to current date (triggers the next code snippet / workflow on user input of "calendar day select") 
  19.  v_PreselectedValue = zoho.currentdate.toString("EEEE") + "<span>" + zoho.currentdate.toString("d") + "</span>" + zoho.currentdate.addDay(v_DateIndex).toString("MMMM"); 
  20.  input.Calendar_Day_Select = v_PreselectedValue; 
  21.  // 
  22.  // hide (comment this out if you are still debugging) 
  23.  hide Hidden_Fields; 

Then we need a workflow/trigger that runs whenever a user clicks on one of these date boxes (On User input of Calendar Day Select). The key to remember here is that it isn't a week commencing date but more like the today's date minus 7 or plus 7 days depending on which way they navigate. We then need the offset so that when a user clicks on the #9 entry, the system will know this is March 9th 2022 and not June 9th 2021... To do this, we have 2 date fields which will be hidden to the user but displayed here for testing purposes: the starting date, and then based on the offset, the selected date.

The first bit of this snippet creates a map which for this example would be {"9":1,"10":2,"11":3,"12":4,"13":5,"14":6,"15":7}. This means that if I click on Tuesday<span>10</span>March, this code will match "10" to the map and determine what index or offset this is from the starting date, which is "2". It can then determine which CSS element to highlight in a different CSS color, and which date to enter into the Selected_Date field:
copyraw 
// creating map for offset (determine which CSS box was selected)
m_Offset = Map();
v_StartDate = input.Starting_Date;
v_RefIndex = 0;
for each  v_Offset in {1,2,3,4,5,6,7}
{
	v_RefIndex = v_Offset - 1;
	m_Offset.put(v_StartDate.toDate().addDay(v_RefIndex).toString("d"),v_Offset);
}
input.Selected_Value = input.Calendar_Day_Select;
v_DateOffset = m_Offset.get(input.Calendar_Day_Select.replaceAll("[^0-9]",""));
//
// if a number was selected, ie. not chevrons
if(v_DateOffset >= 0)
{
	//
	// set selected date field value
	input.Selected_Date = input.Starting_Date.addDay(v_DateOffset - 1);
	v_CssIndex = v_DateOffset + 1;
	//
	// Inject some CSS
	v_Css = "<style>";
	// get rid of field label
	v_Css = v_Css + "label.zc-Calendar_Day_Select-label{display:none !important;}";
	// get rid of circle radio inputs
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(2){display:none;}";
	// make cursor into hand (to indicate clickable)
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){cursor:pointer;}";
	// format overall text (the day name)
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){display:block;font-size:10pt;color:#ccc;text-align:center;}";
	// set width so that Wednesday does not wrap
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){width:75px;}";
	// format value within span
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3) span{display:block;font-size:20pt;font-weight:bold;color:#fff;background-color:#ccc;text-align:center;padding-bottom:5px;}";
	// format selected box (the one that was clicked)
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3)[elname='radioEl_zc-Calendar_Day_Select_" + v_CssIndex + "'] span{background-color:#FF1493 !important;}";
	// make boxes align horizontally instead of vertically
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell{float:left}";
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-row{float:left}";
	// format chevrons
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label[elname='radioEl_zc-Calendar_Day_Select_1']{font-size:65px}";
	v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label[elname='radioEl_zc-Calendar_Day_Select_9']{font-size:65px}";
	v_Css = v_Css + "</style>";
	input.Form_Css = v_Css;
}
  1.  // creating map for offset (determine which CSS box was selected) 
  2.  m_Offset = Map(); 
  3.  v_StartDate = input.Starting_Date; 
  4.  v_RefIndex = 0; 
  5.  for each  v_Offset in {1,2,3,4,5,6,7} 
  6.  { 
  7.      v_RefIndex = v_Offset - 1; 
  8.      m_Offset.put(v_StartDate.toDate().addDay(v_RefIndex).toString("d"),v_Offset); 
  9.  } 
  10.  input.Selected_Value = input.Calendar_Day_Select; 
  11.  v_DateOffset = m_Offset.get(input.Calendar_Day_Select.replaceAll("[^0-9]","")); 
  12.  // 
  13.  // if a number was selected, ie. not chevrons 
  14.  if(v_DateOffset >= 0) 
  15.  { 
  16.      // 
  17.      // set selected date field value 
  18.      input.Selected_Date = input.Starting_Date.addDay(v_DateOffset - 1); 
  19.      v_CssIndex = v_DateOffset + 1; 
  20.      // 
  21.      // Inject some CSS 
  22.      v_Css = "<style>"; 
  23.      // get rid of field label 
  24.      v_Css = v_Css + "label.zc-Calendar_Day_Select-label{display:none !important;}"; 
  25.      // get rid of circle radio inputs 
  26.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(2){display:none;}"; 
  27.      // make cursor into hand (to indicate clickable) 
  28.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){cursor:pointer;}"; 
  29.      // format overall text (the day name) 
  30.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){display:block;font-size:10pt;color:#ccc;text-align:center;}"; 
  31.      // set width so that Wednesday does not wrap 
  32.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3){width:75px;}"; 
  33.      // format value within span 
  34.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3) span{display:block;font-size:20pt;font-weight:bold;color:#fff;background-color:#ccc;text-align:center;padding-bottom:5px;}"; 
  35.      // format selected box (the one that was clicked) 
  36.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label:nth-child(3)[elname='radioEl_zc-Calendar_Day_Select_" + v_CssIndex + "'] span{background-color:#FF1493 !important;}"; 
  37.      // make boxes align horizontally instead of vertically 
  38.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell{float:left}"; 
  39.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-row{float:left}"; 
  40.      // format chevrons 
  41.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label[elname='radioEl_zc-Calendar_Day_Select_1']{font-size:65px}"; 
  42.      v_Css = v_Css + "div.zc-Calendar_Day_Select .choice-table-cell span label[elname='radioEl_zc-Calendar_Day_Select_9']{font-size:65px}"; 
  43.      v_Css = v_Css + "</style>"; 
  44.      input.Form_Css = v_Css; 
  45.  } 
But wait we're not finished as there are the chevrons / less-than greater-than signs options to program into. For this simply append the following:
copyraw 
else if(input.Calendar_Day_Select == "&lt;")
{
	//
	// set selected date field value
	input.Selected_Date = input.Starting_Date.subDay(7);
	input.Starting_Date = input.Starting_Date.subDay(7);
	//
	// set the values for the calendar select field
	clear Calendar_Day_Select;
	input.Calendar_Day_Select:ui.add("&lt;");
	for each index v_DateIndex in {1,2,3,4,5,6,7}
	{
		input.Calendar_Day_Select:ui.add(input.Selected_Date.addDay(v_DateIndex).toString("EEEE") + "<span>" + input.Selected_Date.addDay(v_DateIndex).toString("d") + "</span>" + input.Selected_Date.addDay(v_DateIndex).toString("MMMM"));
	}
	input.Calendar_Day_Select:ui.add("&gt;");
	v_PreselectedValue = input.Selected_Date.toString("EEEE") + "<span>" + input.Selected_Date.toString("d") + "</span>" + input.Selected_Date.addDay(v_DateIndex).toString("MMMM");
	input.Calendar_Day_Select = v_PreselectedValue;
}
else if(input.Calendar_Day_Select == "&gt;")
{
	//
	// set selected date field value
	input.Selected_Date = input.Starting_Date.addDay(7);
	input.Starting_Date = input.Starting_Date.addDay(7);
	//
	// set the values for the calendar select field
	clear Calendar_Day_Select;
	input.Calendar_Day_Select:ui.add("&lt;");
	for each index v_DateIndex in {1,2,3,4,5,6,7}
	{
		input.Calendar_Day_Select:ui.add(input.Selected_Date.addDay(v_DateIndex).toString("EEEE") + "<span>" + input.Selected_Date.addDay(v_DateIndex).toString("d") + "</span>" + input.Selected_Date.addDay(v_DateIndex).toString("MMMM"));
	}
	input.Calendar_Day_Select:ui.add("&gt;");
	v_PreselectedValue = input.Selected_Date.toString("EEEE") + "<span>" + input.Selected_Date.toString("d") + "</span>" + input.Selected_Date.addDay(v_DateIndex).toString("MMMM");
	input.Calendar_Day_Select = v_PreselectedValue;
}
  1.  else if(input.Calendar_Day_Select == "&lt;") 
  2.  { 
  3.      // 
  4.      // set selected date field value 
  5.      input.Selected_Date = input.Starting_Date.subDay(7); 
  6.      input.Starting_Date = input.Starting_Date.subDay(7); 
  7.      // 
  8.      // set the values for the calendar select field 
  9.      clear Calendar_Day_Select; 
  10.      input.Calendar_Day_Select:ui.add("&lt;"); 
  11.      for each index v_DateIndex in {1,2,3,4,5,6,7} 
  12.      { 
  13.          input.Calendar_Day_Select:ui.add(input.Selected_Date.addDay(v_DateIndex).toString("EEEE") + "<span>" + input.Selected_Date.addDay(v_DateIndex).toString("d") + "</span>" + input.Selected_Date.addDay(v_DateIndex).toString("MMMM")); 
  14.      } 
  15.      input.Calendar_Day_Select:ui.add("&gt;"); 
  16.      v_PreselectedValue = input.Selected_Date.toString("EEEE") + "<span>" + input.Selected_Date.toString("d") + "</span>" + input.Selected_Date.addDay(v_DateIndex).toString("MMMM"); 
  17.      input.Calendar_Day_Select = v_PreselectedValue; 
  18.  } 
  19.  else if(input.Calendar_Day_Select == "&gt;") 
  20.  { 
  21.      // 
  22.      // set selected date field value 
  23.      input.Selected_Date = input.Starting_Date.addDay(7); 
  24.      input.Starting_Date = input.Starting_Date.addDay(7); 
  25.      // 
  26.      // set the values for the calendar select field 
  27.      clear Calendar_Day_Select; 
  28.      input.Calendar_Day_Select:ui.add("&lt;"); 
  29.      for each index v_DateIndex in {1,2,3,4,5,6,7} 
  30.      { 
  31.          input.Calendar_Day_Select:ui.add(input.Selected_Date.addDay(v_DateIndex).toString("EEEE") + "<span>" + input.Selected_Date.addDay(v_DateIndex).toString("d") + "</span>" + input.Selected_Date.addDay(v_DateIndex).toString("MMMM")); 
  32.      } 
  33.      input.Calendar_Day_Select:ui.add("&gt;"); 
  34.      v_PreselectedValue = input.Selected_Date.toString("EEEE") + "<span>" + input.Selected_Date.toString("d") + "</span>" + input.Selected_Date.addDay(v_DateIndex).toString("MMMM"); 
  35.      input.Calendar_Day_Select = v_PreselectedValue; 
  36.  } 
Category: Zoho :: Article: 808

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Joes Word Cloud

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Ethereum:
Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.