<script type="text/javascript">
$(document).ready(function () {
    var listName = "Leave Request";
    var context = new SP.ClientContext.get_current();
    var list = context.get_web().get_lists().getByName(listName);
    var cQuery = new SP.CamlQuery();
    var camlXML = "<View><Query><Where><FieldRef Name='' /></OrderBy></Query></View>";

    var link = _spPageContextInfo.webAbsoluteUrl + "/Lists/Leave Request/DispForm.aspx?ID=";     

    var listitems = list.getItems(cQuery);
    context.executeQueryAsync(function () {
        var count = listitems.get_count();
        var enumerator = listitems.getEnumerator();
       if(count > 0){
                var current = enumerator.get_current();
                var desc = current.get_fieldValues("Details").Description;
                var title = current.get_fieldValues("Name").Title;
                var created = current.get_fieldValues("Created").Created;
                var ID = current.get_fieldValues("ID").ID;
                var start = current.get_fieldValues("Start_x0020_Date");
                var end = current.get_fieldValues("End_x0020_Date");

                $("#leave-list").append("<div style=\"width:100%; margin-top:0px; border:solid 0px #e1e1e1\"><div style=\"width:100%; height:50px;; float:left; padding:3px \"><font class=\"Ndate\">" + title + "</font><br /><font style=\"font-size:9px !important; color:#ccc; \">" + start +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -: "+ end + "</font><a style='float:right;font-size:11px;color:grey;' target='_blank' href='" + link + ID + "' >Details</a></div> </div>");
            $("#leave-container").append("No leaves");

        function (s, a) {
            console.error("Leave Widget: " + a.get_message());

Above is javascript Code i am using Now I want to show the data weekly employees on leave and monthly employees on leave

and here is my list structure imageenter image description here

1 Answer 1


You need to determine some dates data: current month, current month days count, current week first day and eventually next month if current week overflows to get necessary interval.

// Returns date object for the first day of the current week
function getMonday(d) {
    d = new Date(d);
    var day = d.getDay();
    var diff = d.getDate() - day + (day == 0 ? -6:1);
    return new Date(d.setDate(diff));
// Returns a date object with given date and days added to it
function addDays(date, days) {
    var nDate = new Date(date);
    nDate.setDate(nDate.getDate() + days);
    return nDate;

var currDate = new Date();
var month_lastDayDate = new Date(currDate.getFullYear(), currDate.getMonth() + 1, 0).getDate();

var week_dateObj = getMonday(new Date())

var month_beginStr = currDate.getFullYear() +'-'+ (currDate.getMonth() + 1) +'-01';
var month_endStr = currDate.getFullYear() +'-'+ (currDate.getMonth() + 1) +'-'+ month_lastDayDate;

var week_beginStr = currDate.getFullYear() +'-'+ (week_dateObj.getMonth() + 1) +'-'+ week_dateObj.getDate();
var week_endStr = currDate.getFullYear() +'-'+ (addDays(week_dateObj, 6).getMonth() + 1) +'-'+ addDays(week_dateObj, 6).getDate();

(functions go to CMS and to Sparebyes.)

Next, building your CAML query should not be that hard, it is about greather/lower than dates, just like this:

                <FieldRef Name="Start_x0020_Date" />
                <Value Type="DateTime">_beginStr</Value>
                <FieldRef Name="End_x0020_Date" />
                <Value Type="DateTime">_endStr</Value>
        <FieldRef Name="ID" Ascending="True" />

Right, two queries are needed; one for week, one for month. Unless you nest an OR within the query.

What you may also try is to retrieve all of your items and do the dates difference within your while loop and then set some CSS style for ones who leave by the end of the week, and for ones who leave by the end of the month. Remember you can use comparison operators to compare date objects.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.