Weekly Calendar Hightlight Current Day and Current Hour

  • 3
  • Idea
  • Updated 6 months ago
Ever wanted your calendar to do this:

1) Highlight an event / appointment
2) Highlight the current day in week view in a different background color.
3) highlight the current hour (approximately to within every 15 minutes)



Finally got it to do this with the following code:

    /**     * Modifies the calendar drawEvents method to call the Highlight MethodS
     * after drawing events
     */    
    var defaultDrawEvent = skuid.calendar.Calendar.prototype.drawEvents;
    skuid.calendar.Calendar.prototype.drawEvents = function() {
        defaultDrawEvent.apply(this);
        skuid.snippet.getSnippet('HighlightCurrentAppointment')();
        skuid.snippet.getSnippet('SetCurrentWeekUI')();
        skuid.snippet.getSnippet('SetCurrentTimeUI')();
    };

the three snippets that are called highlights the current event for a client, the second set the background color to all of the week to the pinkish color and the last one draws the red line across the hour mark.  Here is the code for them:

highlightCurrentAppointment:
/** * this logic uses jQuery to select the current client's appointment and add a
 * class to highlight it in order for it to stand out visually
 *
 */

var params = arguments[0],
    $ = skuid.$;
var currentClientId = window.calendar.currentClientId;

if ( UTILS.isValidObjRef( currentClientId )) {
     $(".nx-cal-event:has(a[href='/" + currentClientId + "']) ").addClass("highlightAppointment");
}

SetCurrentWeekUI
var params = arguments[0], $ = skuid.$;

var dataDateValue = window.calendar.currentFormattedDate;

if ( UTILS.isValidObjRef( dataDateValue )) {
     $("td[data-date='" + dataDateValue + "']").removeClass('nx-cal-week-hour').addClass('darkBackground');
}

SetCurrentTimeUI
var params = arguments[0], $ = skuid.$;

var dataDateValue = window.calendar.currentFormattedDate,
    currentHour = window.calendar.currentHour,
    dataMinutes = window.calendar.currentMinutes;

if ( UTILS.isValidObjRef( dataDateValue )) {
     $("td[data-date='" + dataDateValue + "'][data-hour='" + currentHour + "'][data-minutes='" + dataMinutes + "'] ").addClass('markTime');
}

the window.calendar object is a module I use to keep certain values and can be calculated beforehand.  The only one that may require some thought is the dataMinutes which I did with the following code toRearestInterval which can be called as follows:  toNearestInterval("23", 15) for example which will return 15.

        toNearestInterval: function ( input, interval ) {           
var returnVal = input;
            returnVal = Math.floor(returnVal / interval);
            returnVal = returnVal * interval;
            return returnVal;
        }

The CSS code as follows:

.highlightAppointment {    box-shadow: 0px 0px 20px red; 
    -moz-box-shadow: 0px 0px 20px red;
    -webkit-box-shadow: 0px 0px 20px red;
}


.darkBackground {
    /*background-color: #f4f1f1;*/
    background-color: #ffeee0;
    border: 1px #e7e5e5 solid;
}
.markTime {
    background-color: #ffeee0;
    border-top: 2px red solid;
    border-bottom: 1px #e7e5e5 solid;
    border-left:1px #e7e5e5 solid;
    border-right:1px #e7e5e5 solid;
}

Hope it helps someone.
Photo of Sofware Developer Guy

Sofware Developer Guy

  • 1,354 Points 1k badge 2x thumb

Posted 2 years ago

  • 3
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,200 Points 5k badge 2x thumb
Leo,

Thanks for sharing your knowledge with the community, this is awesome!
Photo of MWS

MWS

  • 158 Points 100 badge 2x thumb
Hi! I think this is a brilliant idea. I am looking for a little assistance in getting it working. I have created the snippets & css, however it doesn't render properly yet. Any advice would be greatly appreciated :)
Photo of Robin

Robin

  • 894 Points 500 badge 2x thumb
Hi team, 

Thanks Leo for sharing this! I'm a little stuck as well, on the basics admittedly. Where does the initial code go that gets the other snippets? Is that a normal snippet and the others are in-line snippets?

Many thanks, 

Robin