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

PowerShell For create Sub site in office 365

#Add references to SharePoint client assemblies and authenticate to Office 365 site Add-Type -Path "\Software\SharePoint 2013 Client Browser v1.7\Microsoft.SharePoint.Client.dll" Add-Type -Path "\Software\SharePoint 2013 Client Browser v1.7\Microsoft.SharePoint.Client.Runtime.dll" $Username = Read-Host -Prompt "Please enter your username" $Password = Read-Host -Prompt "Please enter your password" -AsSecureString $Site = "https://XXXXXXX.sharepoint.com/sites/Test2/" $Context = New-Object Microsoft.SharePoint.Client.ClientContext($Site) $Creds = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Username,$Password) $Context.Credentials = $Creds $csvLocation = "C:\Users\PS_SiteCollectionsToCreate.csv" $csv = Import-Csv $csvLocation #List Custom Templates $Templates = $Context.Site.GetWebTemplates("1033","0") $Context.Load($Templates) $Context.ExecuteQuery() $Templates | Whe...
Post a Comment
Read more

SharePoint Framework extensions to Call Azure Function

In this article, we will talk about prerequisites, how to call Azure Function from SPFX extension, How to Create HHTP function, connect Visual Styuid editor to Azure and publish them, and Set Up CORS on the Azure Function, Create SharePoint Framework Extension, Azure Function, etc. Prerequisites :  Azure Subscriptions   VS code  Spfx Development Env  -   Step by steps details: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment  Follow the below steps to create Azure Functions in the Azure portal.  Steps by steps guide:  https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient-enterpriseapi    Reference :  https://docs.microsoft.com/en-us/answers/questions/430645/how-to-access-sharepoint-rest-api-in-my-function-a.html Step-1 : Login to Azure Portal (https://portal.azure.com/)   Step-2 : As highlighted below, click on the  + Create a resource, and click on “Comput...
Post a Comment
Read more

SharePoint Capacity Management and Sizing Overview

Capacity management   is an ongoing process, because no implementation remains static with regard to content and usage. You need to plan for growth and change, so that your SharePoint Server 2013–based environment can continue to deliver an effective business solution. Capacity Planning  is only one part of the capacity management cycle. It is the initial set of activities that brings the design architect to the point where there is an initial architecture that the architect believes will best serve the SharePoint Server 2013 deployment. The capacity management model includes additional steps to help you validate and tune the initial architecture, and provides a feedback loop for re-planning and optimizing the production environment until it can support design goals with optimal choices of hardware, topology, and configuration. Capacity management versus capacity planning Capacity management extends the concept of capacity planning to express a cyclical appr...
Post a Comment
Read more