TexasSwede
texasswede@gmail.com
  • About this blog
  • My Website
  • My Resume
  • XML Export Tool
  • Photos

Show and Tell – Dynamic Web Calendar

Posted on November 27, 2012 by Karl-Henry Martinsson Posted in Frameworks, IBM/Lotus, Javascript, Lotusscript, Notes/Domino, Programming, Web Development 1 Comment

In this post in the developerWorks forum, Andy Herlihy is asking about how to create a small calendar that can be embedded into an existing intranet website. As Carl Tyler points out, Andy could simply use Dojo.

However, this is a good example to show some jQuery combined with the power of IBM Lotus Domino.  Lets’ break it down into a few smaller steps.

The first one is to create a Domino web agent that will take the current date and build a calendar for that month. There will be no links or javascript code in the HTML generated, just plain HTML code, with some id attributes to make it easy to address different cells later.

The next step is to create a very simple webpage, with some Javascript to load jQuery and set up the calendar to detect clicks. The clicks will cause another call to the Domino server, this time to a view using RestrictToCategories to only get the entries for the specified date. The entries are returned as HTML and through jQuery they are displayed in a div on the webpage. We also want to add a little bit of CSS to make the calendar pretty. The CSS also lives on the HTML page.

Finally we create the view, it’s associated view template form and a form to create some entries that we can use for testing.

 

Let’s look at the code. First the Domino web agent. It should be pretty self explanatory:

%REM
    Agent WebCalendar
    Created Nov 26, 2012 by Karl-Henry Martinsson/Deep-South
    Description: Returns HTML for a calendar for current month
%END REM
Option Public
Option Declare

Sub Initialize
    '*** Used to get URL params
    Dim session As New NotesSession
    Dim webform As NotesDocument
    Dim urlstring As String
    Dim urlarr As Variant
    Dim urlvaluename As Variant
    Dim urldata List As String
    Dim webservername As String
    '*** Agent specific
    Dim startDate As NotesDateTime
    Dim endDate As NotesDateTime
    Dim i As Integer
    Dim j As Integer
    Dim startweekday As Integer
    Dim thisMonth As Integer
    Dim currDate As Double
    Dim cellclass As String

    Set webform = session.DocumentContext
    '*** Calculate path for this database, for image/icon file references later
    webservername = webform.GetItemValue("Server_Name")(0)
    '*** Remove leading "OpenAgent"
    urlstring = StrRight(webform.Query_String_Decoded(0),"&")

    If urlstring <> "" Then
        '*** Get all params passed to agent
        urlarr = Split(urlstring,"&")
        For i = LBound(urlarr) To UBound(urlarr)
            urlvaluename = Split(urlarr(i),"=")
            urldata(urlvaluename(0)) = urlvaluename(1)
        Next

        If IsElement(urldata("date")) = False Then
            urldata("date") = Format$(Now(),"mm/dd/yyyy")
        End If
    Else
        urldata("date") = Format$(Now(),"mm/dd/yyyy")
    End If

    '*** Get first and last date of current month
    Set startDate = New NotesDateTime(Format$(urldata("date"),"mm/01/yyyy"))
    Set endDate = New NotesDateTime(startdate.DateOnly)
    Call endDate.AdjustMonth(1)
    Call endDate.AdjustDay(-1)

    currDate = CDbl(CDat(startDate.DateOnly))
    startweekday = Weekday(Cdat(startDate.Dateonly))

    '*** HTML header
    Print "Content-type: text/html" ' & CRLF
    Print |<table class="calendar">|
    '*** Create calendar header with weekdays
    Print |<tr><td colspan=7 class="labelMonthYear">| + Format$(CDat(startDate.DateOnly),"mmmm yyyy") + |</td></tr>|
    Print |<tr class="calendarHeader">|
    Print |<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>|
    Print |</tr>|

    '*** Build rows for the weeks
    For i = 1 To 6
        Print |<!-- Start row | & i & | -->|
        Print |<tr class="calendarRow" id="calendarRow| & i & |">|
        For j = 1 To 7
            If j < startweekday And i = 1 Then
                Print |<td class="emptyCell"></td>|            ' Blank cell before dates
            ElseIf currDate >= CDbl(CDat(startDate.DateOnly)) And currDate <= CDbl(CDat(endDate.DateOnly)) Then
                cellclass = "calendarCell"
                If j = 1 Then
                    cellclass = cellclass + " sundayCell"
                End If
                If j = 7 Then
                    cellclass = cellclass + " saturdayCell"
                End If
                Print |<td class="| + cellclass + |" id="| + Format$(CDat(currDate),"yyyy-mm-dd") + |">|
                Print Day(CDat(currDate))    ' Day number
                Print |</td>|
                currDate = currDate + 1
            Else
                Print |<td class="emptyCell"></td>|            ' Blank cell after dates
            End If
        Next
        Print |</tr>|
        Print |<!-- End row | & i & | -->|
        Print ""
        If currDate >= CDbl(CDat(endDate.DateOnly)) Then
            Exit For
        End If
    Next
    Print |</table>|
End Sub

I am setting the id attribute on the cells to the date in yyyy-mm-dd format, and I will also use that in the categorized view that will later use. Using ISO 8601 for dates have several advantages, in our case particular because we don’t have to worry about the / character that will mess up the URL to the Domino view we will call later.
I also use class attributes on the cells, so CSS can be used to easily format the calendar.
Next we create the web page where we will insert the calendar and also display the entries for any selected day. We load jQuery from Googles CDN, and after the DOM is fully loaded by the browser, we make an ajax call to the Domino server and get the HTML of the calendar back.

After the calendar is retrieved, we use jQuery to trigger a Javascript function on click on any date cell. The code will detect the id of the cell, which just happens to be the date, and then performs another ajax call to teh Domino server, this time to the view to return all entries for the selected date. The data returned is then inserted into a div.

<!doctype html> 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Calendar Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<script>
    // The following function is executed after page is fully loaded
    $(document).ready(function () {
        var remoteURL = "http://www.texasswede.com/test/calendar.nsf/WebCalendar?OpenAgent";
        var viewURL = "http://www.texasswede.com/test/calendar.nsf/CalendarView?OpenView";
        // Load the calendar HTML from our Domino server using ajax
        $.get(remoteURL,
        function(data) {
                // Update div with id 'ajaxCalendar' with HTML calendar from server
                $("#ajaxCalendar").html(data);
                // Set all calendar cells to trigger on click
                $(".calendarCell").each( function(i) { 
                        // Get the id (i.e. selected day) of the cell clicked
                        var id = $(this).attr("id");               
                        $(this).click( function() {
                        // Call view on Domino server and return entries for selected day
                        $.get(viewURL, { RestrictToCategory: id },
                                function(data) {
                                        // Put list of entries in viewData div
                                        $("#viewData").html(data);
                                 });
                        });
                } );
        });
});
</script>
<style>
    td.calendarCell {
        border: 1px dotted black;
        height: 30px;
        width: 30px;
        text-align: center;
        vertical-align: middle;
    }
    td.emptyCell {
        background-color: #EFEFEF;
        height: 30px;
        width: 30px;
    }
    td.sundayCell {
        background-color: #DDDDDD;
        color: #DD0000;
    }
    td.saturdayCell {
        background-color: #DDDDDD;
    }
    .labelMonthYear {
        font-family: Arial;
        font-size: 12pt;
        text-align: center;
    }
  </style>
  <body>
    <div id="ajaxCalendar"></div>
    <br>
    <div id="viewData"></div>
  </body>
</html>

What’s left to do to get this all to work is to create the following Domino design elements:

  1. A form to use for entering calendar data. I called it “Calendar Entry”, and just put two fields on it, ‘CreatedDate’ (computed for display, using @Now) and ‘Title’ (text field).
  2. A view called ‘CalendarView’, with two columns. The first one is categorized and is displaying the created date in yyyy-mm-dd format, while the second one is displaying the title field and adding an HTML line break after. The view is set to treat content as HTML.
  3. A form called ‘$$ViewTemplate for CalendarView’, set to treat form as HTML. The form only contains an embedded view element, pointing to ‘CalendarView’, and it is set to return data as HTML as well.

This is the formula I used in the first column of the ‘CalendarView’ view:

y:= @Year(CreatedDate);
m:= @Month(CreatedDate);
d:= @Day(CreatedDate);
yyyy:=@Text(y);
mm:=@If(m<10;"0";"") + @Text(m);
dd:=@If(d<10;"0";"") + @Text(d);
yyyy + "-" + mm + "-" + dd

And this is what it looks like when finished:

This is just one example of how you can combine Domino (agents, views and forms) with jQuery in order to integrate Domino based data into your web applications.

Happy coding!

« Swedish cheesecake for Thanksgiving
Blog issues – comments not displaying »

One thought on “Show and Tell – Dynamic Web Calendar”

  1. Alan Hurt says:
    November 28, 2012 at 06:31

    If you’re looking for a really nice UI, try the fullCalendar jQuery plugin. Then all you would need is an agent, view, etc to produce JSON that the calendar reads. It’s actually very nice looking and very easy to work with.

    Reply

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stack Exchange

profile for Karl-Henry Martinsson on Stack Exchange, a network of free, community-driven Q&A sites

Recent Posts

  • Domino 14 is now available
  • Domino 14 Early Access Program
  • Announced: Engage 2024
  • Integrate Node-RED with Notes and Domino
  • Notes and Domino v12 is here!

Recent Comments

  • Theo Heselmans on Announced: Engage 2024
  • Lotus Script Multi-thread Message Box [SOLVED] – Wanted Solution on ProgressBar class for Lotusscript
  • Viet Nguyen on Keep up with COVID-19 though Domino!
  • Viet Nguyen on Keep up with COVID-19 though Domino!
  • Mark Sullivan on Looking for a HP calculator? Look no further!

My Pages

  • How to write better code in Notes

Archives

  • December 2023 (1)
  • October 2023 (2)
  • September 2023 (1)
  • June 2021 (1)
  • April 2021 (2)
  • March 2021 (1)
  • August 2020 (3)
  • July 2020 (2)
  • April 2020 (2)
  • March 2020 (1)
  • December 2019 (2)
  • September 2019 (1)
  • August 2019 (2)
  • July 2019 (2)
  • June 2019 (3)
  • April 2019 (2)
  • December 2018 (1)
  • November 2018 (1)
  • October 2018 (5)
  • August 2018 (2)
  • July 2018 (3)
  • June 2018 (2)
  • May 2018 (1)
  • April 2018 (2)
  • March 2018 (1)
  • February 2018 (2)
  • January 2018 (4)
  • December 2017 (3)
  • November 2017 (2)
  • October 2017 (2)
  • September 2017 (1)
  • August 2017 (2)
  • July 2017 (6)
  • May 2017 (4)
  • February 2017 (1)
  • January 2017 (2)
  • December 2016 (2)
  • October 2016 (3)
  • September 2016 (4)
  • August 2016 (1)
  • July 2016 (2)
  • June 2016 (2)
  • May 2016 (3)
  • April 2016 (1)
  • March 2016 (4)
  • February 2016 (2)
  • January 2016 (4)
  • December 2015 (3)
  • November 2015 (2)
  • October 2015 (1)
  • September 2015 (2)
  • August 2015 (1)
  • July 2015 (5)
  • June 2015 (2)
  • April 2015 (2)
  • March 2015 (3)
  • February 2015 (2)
  • January 2015 (10)
  • December 2014 (1)
  • November 2014 (3)
  • October 2014 (3)
  • September 2014 (13)
  • August 2014 (6)
  • July 2014 (5)
  • May 2014 (3)
  • March 2014 (2)
  • January 2014 (10)
  • December 2013 (5)
  • November 2013 (2)
  • October 2013 (5)
  • September 2013 (4)
  • August 2013 (7)
  • July 2013 (3)
  • June 2013 (1)
  • May 2013 (4)
  • April 2013 (7)
  • March 2013 (8)
  • February 2013 (9)
  • January 2013 (5)
  • December 2012 (7)
  • November 2012 (13)
  • October 2012 (10)
  • September 2012 (2)
  • August 2012 (1)
  • July 2012 (1)
  • June 2012 (3)
  • May 2012 (11)
  • April 2012 (3)
  • March 2012 (2)
  • February 2012 (5)
  • January 2012 (14)
  • December 2011 (4)
  • November 2011 (7)
  • October 2011 (8)
  • August 2011 (4)
  • July 2011 (1)
  • June 2011 (2)
  • May 2011 (4)
  • April 2011 (4)
  • March 2011 (7)
  • February 2011 (5)
  • January 2011 (17)
  • December 2010 (9)
  • November 2010 (21)
  • October 2010 (4)
  • September 2010 (2)
  • July 2010 (3)
  • June 2010 (2)
  • May 2010 (3)
  • April 2010 (8)
  • March 2010 (3)
  • January 2010 (5)
  • November 2009 (4)
  • October 2009 (7)
  • September 2009 (1)
  • August 2009 (7)
  • July 2009 (1)
  • June 2009 (4)
  • May 2009 (1)
  • April 2009 (1)
  • February 2009 (1)
  • January 2009 (3)
  • December 2008 (1)
  • November 2008 (1)
  • October 2008 (7)
  • September 2008 (7)
  • August 2008 (6)
  • July 2008 (5)
  • June 2008 (2)
  • May 2008 (5)
  • April 2008 (4)
  • March 2008 (11)
  • February 2008 (10)
  • January 2008 (8)

Categories

  • AppDev (10)
  • Blogging (11)
    • WordPress (5)
  • Design (5)
    • Graphics (1)
    • UI/UX (2)
  • Featured (5)
  • Financial (2)
  • Food (5)
    • Baking (3)
    • Cooking (3)
  • Generic (11)
  • History (5)
  • Hobbies (10)
    • LEGO (4)
    • Photography (4)
  • Humor (1)
  • IBM/Lotus (178)
    • #Domino2025 (14)
    • #DominoForever (8)
    • #IBMChampion (46)
    • Administration (7)
    • Cloud (7)
    • CollabSphere (9)
    • Community (49)
    • Connect (33)
    • ConnectED (12)
    • Connections (3)
    • HCL (15)
    • HCL Master (1)
    • IBM Think (1)
    • Lotusphere (46)
    • MWLUG (25)
    • Notes/Domino (99)
      • Domino 11 (7)
    • Sametime (8)
    • Verse (14)
    • Volt (3)
    • Watson (6)
  • Life (8)
  • Microsoft (7)
    • .NET (2)
    • C# (1)
    • Visual Studio (1)
  • Movies (3)
  • Old Blog Post (259)
  • Personal (23)
  • Programming (84)
    • App Modernization (11)
    • Formula (4)
    • Lotusscript (47)
    • NetSuite (4)
      • SuiteScript (3)
    • node.js (4)
    • XPages (4)
  • Reviews (9)
  • Sci-Fi (4)
  • Software (24)
    • Flight Simulator (2)
    • Games (4)
    • Open Source (2)
    • Utilities (6)
  • Technology (37)
    • Aviation (3)
    • Calculators (2)
    • Computers (6)
    • Gadgets (7)
    • Mobile Phones (7)
    • Science (3)
    • Tablets (2)
  • Travel (7)
    • Europe (1)
    • Texas (2)
    • United States (1)
  • Uncategorized (16)
  • Web Development (50)
    • Frameworks (23)
      • Bootstrap (14)
    • HTML/CSS (12)
    • Javascript (32)
      • jQuery (23)

Administration

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Tracking

Creeper
MediaCreeper
  • Family Pictures
© TexasSwede 2008-2014