How to add the "Add" button to Calendar view (or add new item using double click on the day)

Question

I am new to SharePoint. Sorry if answer for my question is obvious. I've created approve absence workflow, InfoPath forms for adding absence statement and calendar view to show planned absences.

Now I want to add posibility of adding new absence statement by clicking on the calendar view. But I don't know how to achieve it. I can't see the "Add" link in calendar view. I can add New item by clicking button in the ribbon, but I want to do it by double clicking on calendar. Is it possible?

I know that I can use Event content type to use it in Calendar lists, but in this case I can add new event by double clicking, but I can't customize form using InfoPath.

I am googling about ways to solve my problem, but unfortunately I can't find any information about my needs.

Is it possible to add new item in calendar view by double-clicking on day and customize new item form using InfoPath?

Every suggestions are very appreciated. Thank you in advance.

PS: SharePoint 2010

Update 1: Also I tried to use Calendars overlay to show my absences in calendar view, but also I can add new item with all necessary fields by double-click, but I don't know how to customize it using InfoPath.

Answer 1

We've done this before with using jQuery. Below is some sample code to add to your calendar view page:

    _spBodyOnLoadFunctionNames.push("setupCalendarClick");

    function setupCalendarClick() {
        copyAllDates();
        applyClickActions();
    }

    function copyAllDates() {
        $(".ms-acal-summary-dayrow").each( function(index, item){
            copyDate($(item).children("td"), $($(".ms-acal-summary-itemrow")[index]).children("td"));
        });
    }

    function copyDate( headers, cells ) {
        for ( var i = 0; i < headers.length; i++ ) {
            $(cells[i]).attr("date", $(headers[i]).attr("date"));
        }
    }

    function applyClickActions() {
        $(".ms-acal-summary-itemrow").children("td").off('click');
        $(".ms-acal-summary-itemrow").children("td").click( function () {
            var date = $(this).attr("date");
            var url = "/site/Lists/Calendar/NewForm.aspx?date=" + escape(date);
            basecampCalendar_OpenDialog(url);
        });
    }

    function basecampCalendar_OpenDialog(url) {
        var options = SP.UI.$create_DialogOptions();
        options.url = url;
        options.dialogReturnValueCallback = Function.createDelegate(null, basecampCalendar_CloseCallback);
        SP.UI.ModalDialog.showModalDialog(options);
    }

    // Dialog callback
    function basecampCalendar_CloseCallback(result, target) {
        if (result === SP.UI.DialogResult.OK) {
            SP.UI.ApplicationPages.CalendarInstanceRepository.lookupInstance("WPQ2").refreshItems();
        }
        if (result === SP.UI.DialogResult.cancel) {

        }
    }

And here is some code to add to your newform.aspx for the calendar:

    ExecuteOrDelayUntilScriptLoaded(fillDefaultValues, "sp.js");

    function fillDefaultValues() {
      var date = GetUrlKeyValue("date");
      setLookupFromFieldName("Start Time", date);
      setLookupFromFieldName("End Time", date);
    }

    function setLookupFromFieldName(fieldName, value) {
        if (value == undefined) return;
        var theInput = findFieldElement( fieldName, "DateTimeFieldDate" );
        theInput.value = unescape(value);
    }

    function findFieldElement( fieldName, fieldType, tagName ) {
        if ( undefined === fieldType ) fieldType = "TextField";
        if ( undefined === tagName ) tagName = "input";
        var element = getTagFromIdentifierAndTitle(tagName, fieldType, fieldName);
        if ( element == null ) alert("could not find the correct input field: " + fieldName + " - " + fieldType);

        return element;
    }

    function getTagFromIdentifierAndTitle(tagName, identifier, title) {
      var len = identifier.length;
      var tags = document.getElementsByTagName(tagName);
      for (var i=0; i < tags.length; i++) {
        var tempString = tags[i].id;
        if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
          return tags[i];
        }
      }
      return null;
    }

You will probably need to change some of this to get it to work for your calendar. Right now our code only did single click, so you'll have to change it for doubleclick.