Skip to main content

CODE : JavaScript Small Calendar Web part Part

<script type="text/javascript" language="javascript" src="/sites/SPOTest2/jQCalendarPart/jquery-2.1.4.min.js"></script>
<script src="/sites/SPOTest2/jQCalendarPart/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/sites/SPOTest2/jQCalendarPart/jquery-ui.min.css" />
<script type="text/javascript" src="/sites/SPOTest2/jQCalendarPart/jquery.SPServices-0.7.2.min.js"></script>


<script type="text/javascript">
JSRequest.EnsureSetup();

var today = new Date();
var currDate = new Date();
var liHtml;
var calliHtml;
var itemURL;
var eventDuration;
var date;
var currentDate = null;
var currWeekDate = null;
var datetext;
var calendarDate;
var siteRelUrl = L_Menu_BaseUrl;
var currentTime;
var hours;
var minutes;
var lastday;
var isNextMnth;
var camlFields;
var camlQuery;
var camlOptions;
var formattedTime;
var i;
var calendarListItems;
var listName = "Calendar";

(function($)
{

var _updateDatepicker_o = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst)
{
_updateDatepicker_o.apply(this, [inst]);
processResult();
};

$(function()
{
getCalendarData(today.getFullYear(), today.getMonth(), today.getDate());
});

function getCalendarData(year, month, date)
{
calendarDate = year + "-" + month + "-1";

camlFields = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='Location' /><FieldRef Name='Description' /><FieldRef Name='fRecurrence' /><FieldRef Name='RecurrenceData' /><FieldRef Name='RecurrenceID' /><FieldRef Name='fAllDayEvent' /></ViewFields>";
camlQuery = "<Query><CalendarDate>" + calendarDate + "</CalendarDate><Where><DateRangesOverlap><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='RecurrenceID' /><Value Type='DateTime'>Month</Value></DateRangesOverlap></Where><OrderBy><FieldRef Name='EventDate' /></OrderBy></Query>";
camlOptions = "<QueryOptions><CalendarDate>" + calendarDate + "</CalendarDate><RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion><ExpandRecurrence>TRUE</ExpandRecurrence><DateInUtc>TRUE</DateInUtc></QueryOptions>";

$().SPServices(
{
operation: "GetListItems",
async: false,
listName: listName,
CAMLViewFields: camlFields,
CAMLQuery: camlQuery,
CAMLQueryOptions: camlOptions,
completefunc: applyCalendarData
});
}

function applyCalendarData(xData, status)
{
calendarListItems = xData;
$(".divDatePicker").datepicker();
}

function processResult()
{
lastday = new Date();
currentDate = null;
i = 7 - (currDate.getDay() + 1);
lastday.setDate(lastday.getDate() + i);

$(calendarListItems.responseXML).SPFilterNode("z:row").each(function()
{
date = new Date($(this).attr("ows_EventDate").substring(0, 4), $(this).attr("ows_EventDate").substring(5, 7) - 1, $(this).attr("ows_EventDate").substring(8, 10), $(this).attr("ows_EventDate").substring(11, 13), $(this).attr("ows_EventDate").substring(14, 16), $(this).attr("ows_EventDate").substring(17, 19));

itemURL = siteRelUrl + "/Lists/Calendar/DispForm.aspx?ID=" + $(this).attr("ows_ID");

if ($(this).attr("ows_fAllDayEvent") == '1')
{
eventDuration = "(All day event)";
}
else
{
eventDuration = '(' + getFormattedTime($(this).attr("ows_EventDate")) + ' - ' + getFormattedTime($(this).attr("ows_EndDate")) + ')';
}

$('.ui-datepicker-calendar a')
.filter(function(index)
{
return $(this).text() == date.getDate() &&
$(this).parent('td').attr("data-year") == date.getFullYear() &&
$(this).parent('td').attr("data-month") == date.getMonth();
}).css("border", "2px solid #2989d1");

if($('.ui-datepicker-calendar a').first().parent('td').attr("data-year") == date.getFullYear() && $('.ui-datepicker-calendar a').first().parent('td').attr("data-month") == date.getMonth()){
//Creating popup for the very first list item
if (currentDate == null)
{
CreatePopUp(date, eventDuration, itemURL, $(this).attr("ows_Title"));
}

//Creating popup for the next set of list items that have different event date
else if (date.getDate() != currentDate.getDate())
{
CreatePopUp(date, eventDuration, itemURL, $(this).attr("ows_Title"));
}
//Adding LIs to the same set of list items that have the same event date
else if (date.getDate() == currentDate.getDate())
{
calliHtml = '<li class="divCalendarLI"><a class="anchCalLi" href="' + itemURL + '">' + $(this).attr("ows_Title") + '</a> ' + eventDuration + '</li>';
$("#" + date.getDate() + "_eventPopUp" + " .divCalendarUL").append(calliHtml);
}
}
currentDate = date;
});
}

function CreatePopUp(eventDate, eventDuration, itemURL, title)
{

if ($("#" + eventDate.getDate() + "_eventPopUp").html() != null)
{
$("#" + eventDate.getDate() + "_eventPopUp").empty();
}

$('.ui-datepicker-calendar a')
.filter(function(index)
{
return $(this).text() == eventDate.getDate() &&
$(this).parent('td').attr("data-year") == eventDate.getFullYear() &&
$(this).parent('td').attr("data-month") == eventDate.getMonth();
}).parent('td').append("<div class='eventPopUpDiv' id='" + eventDate.getDate() + "_eventPopUp' style='display:none'></div> ");

$('.ui-datepicker-calendar a')
.filter(function(index)
{
return $(this).text() == eventDate.getDate() &&
$(this).parent('td').attr("data-year") == eventDate.getFullYear() &&
$(this).parent('td').attr("data-month") == eventDate.getMonth();
}).parent('td').mouseover(function()
{
document.getElementById($(this).find('a').first().text() + "_eventPopUp").style.display = "inline";
});

$('.ui-datepicker-calendar a')
.filter(function(index)
{
return $(this).text() == eventDate.getDate() &&
$(this).parent('td').attr("data-year") == eventDate.getFullYear() &&
$(this).parent('td').attr("data-month") == eventDate.getMonth();
}).parent('td').mouseout(function()
{
document.getElementById($(this).find('a').first().text() + "_eventPopUp").style.display = "none";
});

calliHtml = '<li class="divCalendarLI"><a class="anchCalLi" href="' + itemURL + '">' + title + '</a> ' + eventDuration + '</li>';
$("#" + eventDate.getDate() + "_eventPopUp").append("<h3 class='calHead'>" + eventDate.toLocaleDateString() + "</h3 >");
$("#" + eventDate.getDate() + "_eventPopUp").append("<ul class = 'divCalendarUL'>");
$("#" + eventDate.getDate() + "_eventPopUp" + " .divCalendarUL").append(calliHtml);
}

function getFormattedTime(eventDate)
{
currentTime = new Date(eventDate.substring(0, 4), eventDate.substring(5, 7) - 1, eventDate.substring(8, 10), eventDate.substring(11, 13), eventDate.substring(14, 16), eventDate.substring(17, 19));
hours = currentTime.getHours();
minutes = currentTime.getMinutes();
if (minutes < 10)
{
minutes = "0" + minutes;
}
if (hours > 11)
{
if (hours > 12)
{
return (hours - 12) + ":" + minutes + " " + "PM";
}
else
{
return hours + ":" + minutes + " " + "PM";
}
}
else
{
return hours + ":" + minutes + " " + "AM";
}
}

})(jQuery);
</script>

<div class="divDatePicker"></div>


<style type="text/css">
.eventPopUpDiv {
Z-INDEX: 9002;
PADDING-RIGHT: 10px;
BORDER-BOTTOM: black 1px solid;
POSITION: absolute;
BORDER-LEFT: black 1px solid;
BACKGROUND-COLOR: white;
BORDER-TOP: black 1px solid;
BORDER-RIGHT: black 1px solid
}

.CalendarLI {
MARGIN-LEFT: -23px;
FONT-WEIGHT: normal
}

.divCalendarLI {
MARGIN-LEFT: -23px
}

.calHead {
PADDING-LEFT: 4px;
PADDING-RIGHT: 4px;
FONT-SIZE: 8pt !important;
FONT-WEIGHT: bold !important
}

.anchCalLi {
TEXT-ALIGN: left !important;
}

.anchCalLi:hover {
BORDER-RIGHT-WIDTH: 0px;
BACKGROUND: none transparent scroll repeat 0% 0%;
BORDER-TOP-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
BORDER-LEFT-WIDTH: 0px;
FONT-WEIGHT: normal !important
}

.anchCalLi:visited {
text-decoration: none;
color: rgb(0, 114, 188) !important;
}

.ui-state-default:visited {
text-decoration: none;
color: rgb(0, 114, 188) !important;
}
.ui-widget-header .ui-icon {
 background-image: url("/ui-icons_222222_256x240.png);
}
</style>


Instruction : Please copy this code save as JS file and call in contents editor web part 

Comments

Post a Comment

Popular posts from this blog

Update user language and regional settings with CSOM

Following my previous post around multilingual aspects of SharePoint Online:  Modify Site Regional and Language settings with JSOM and JavaScript Here is some CSOM code which updates the personal regional settings of the current user or another user (if you are a tenant admin and have the rights to update user profiles) Before update: The code: using Microsoft.SharePoint.Client ; using Microsoft.SharePoint.Client.UserProfiles ; using System.Security ; namespace UpdateLanguagePreference { class Program { static void Main ( string[] args ) { //Tenant Admin Details string tenantAdministrationUrl = " https://yoursite-admin.sharepoint.com/ " ; string tenantAdminLoginName = " tenantadmin@yoursite.onmicrosoft.com " ; string tenantAdminPassword = " password " ; //AccountName of the user whos property you want to update. ...
Post a Comment
Read more

Power shell Script to get External Users on Office 365

Hello Everyone,  Below is the Powershell script to get all external users from office 365 tenant. #--------------------------------------------------------------------------------------------------------------------------- $host.Runspace.ThreadOptions = "ReuseThread" #Definition of the function that gets all the external users in a SharePoint Online Tenant. function Get-SPOExternalUsers {     param ($sUserName,$sMessage,$sSPOAdminCenterUrl)     try     {             Write-Host "----------------------------------------------------------------------------"  -foregroundcolor Green         Write-Host "Getting all the external users in a SharePoint Online Tenant" -foregroundcolor Green         Write-Host "----------------------------------------------------------------------------"  -foregroundcolor Green         $msolcred = Get-Credential -UserName...
Post a Comment
Read more

Build and Deploy a custom theme in SharePoint 2019: Using C# and Site features

Custom Theme and Branding are common to use cases and all kinds of business users like to have the personalized team and collaboration sites. today I am posting C# code that will help to build custom features for SharePoint 2019 site.   If need any assistance, I would be happy to help: kamal_pandey@outlook.com  ----------------------------- Code to build  custom features---------- using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Text; using System.Threading.Tasks; using Microsoft.SharePoint; using Microsoft.SharePoint.Utilities; namespace SharePointBranding.Code {     public class BrandingManager     {         public SPWeb Web { get; set; }         public BrandingManager(SPWeb web)         {             Web = web;         }         public void SetMasterPage(stri...
Post a Comment
Read more