Question

I would like to know if it is possible to call the “eventNew” function within the same JS file. As I’m trying to access the “eventNew” function from a different function.

Here is a part of the code:

$calendar.weekCalendar({
    displayOddEven: true,
    timeslotsPerHour: 4,
    allowCalEventOverlap: true,
    overlapEventsSeparate: true,
    firstDayOfWeek: 1,
    businessHours: { start: 1, end: 24, limitDisplay: true },
    daysToShow: 7,
    switchDisplay: { '1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 7 },
    title: function (daysToShow) {
        return daysToShow == 1 ? '%date%' : '%start% - %end%';
    },
    height: function ($calendar) {
        return $(window).height() - $("h1").outerHeight() - 1;
    },
    eventNew: function (calEvent, $event) {
        var $dialogContent = $("#event_edit_container");
        resetForm($dialogContent);
        var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
        var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
        var titleField = $dialogContent.find("input[name='title']");
        var bodyField = $dialogContent.find("textarea[name='body']");


        $dialogContent.dialog({
            modal: true,
            title: "New Calendar Event",
            close: function () {
                $dialogContent.dialog("destroy");
                $dialogContent.hide();
                $('#calendar').weekCalendar("removeUnsavedEvents");
            },
            buttons: {
                save: function () {
                    calEvent.id = id;
                    id++;
                    calEvent.start = new Date(startField.val());
                    calEvent.end = new Date(endField.val());
                    calEvent.title = titleField.val();
                    calEvent.body = bodyField.val();

                    SaveEvent(); // Modified

                    $calendar.weekCalendar("removeUnsavedEvents");
                    $calendar.weekCalendar("updateEvent", calEvent);
                    $dialogContent.dialog("close");
                },
                cancel: function () {
                    $dialogContent.dialog("close");
                }
            }
        }).show();

        $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
        setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));

    }
});

Answer 1

Yes you can. Put the function outside the object on a variable (preferrably namespaced so not to pollute the global namespace) and then call that from where you wish:

var namespace.myEventNew = function (calEvent, $event) {
   [code here]
}

$calendar.weekCalendar({
  ...
  eventNew : function (calEvent, $event) {
      namespace.myEvent(calEvent, $event);
  },
  ...
});

You might want to do this even more loosely coupled with a pub/sub system of any sort. See: https://gist.github.com/1321768