How to add Dynamic Template whenever i click on particular Date.

[arepalli-praveenkumar]

My Idea is to add Dynamic content (partial HTML file) whenever i perform click action on particular Date.Its like a Google Calendar create event or task Quick popup.How Do I achieve this .Any help appreciated

month.html

   <tbody>
     <tr ng-repeat="row in rows track by $index">
        <td ng-show="showWeeks" class="calendar-week-column ">
           <small><em>{{ weekNumbers[$index] }}</em></small>
        </td>
        <td ng-repeat="dt in row track by dt.date" class="monthview-dateCell"  ng-click="select(dt.date)">
           <div ng-class="{'text-muted':dt.secondary}" ng-click="empty()">
              {{dt.label}}
           </div>
           <div ng-if="!dt.events" ng-click="emptySelected()"  >&nbsp;</div>
           <div class="eventin"  ng-repeat="event in dt.events | filter:search| limitTo:3" ng-if="dt.events"   ng-class="{'text-center':true, 'monthview-current': dt.current&&!dt.selected&&!dt.hasEvent,'monthview-secondary-with-event': dt.secondary&&dt.hasEvent, 'monthview-primary-with-event':!dt.secondary&&dt.hasEvent&&!dt.selected, 'monthview-selected': dt.selected}" >
              <div  ng-click="eventSelected({event:dt.events})">
                 <div ng-if="dt.hasEvent" class="monthview-eventdetail-timecolumn">
                    {{event.title}}
                 </div>
              </div>
           </div>
           <div class="dynamicHtmlClass">
          </div>
        </td>
     </tr>
  </tbody>

In Calendar.js I tried in following ways Not worked.

scope.select = function (selectedDate) {
 scope.partialHtml = '<div><button >Event</button><button >Task</button><button >Followup</button></div>';
 element.find('.dynamicHtmlClass').html(scope.partialHtml);
}

Applied to All 'td'

  scope.select = function (selectedDate) {
    scope.partialHtml = '<div><button >Event</button><button >Task</button>
     <button >Followup</button></div>';
   element.find('td').html(scope.partialHtml);
  }

[twinssbc]

What I intended user to do is to add/edit the event in a separate page, as it's more natural to a mobile app. If you want to have a popup when you clicked a cell. You can pass in $event in the ng-click function,

ng-click="select(dt.date, $event)

Then you can get the mouse location and the target element from the $event object.

Also probably a better solution is don't do dom maniplation in the controller. You create the element beforehand but use ng-class or ng-show to manipulate the visibility and the position.

<div ng-show="eventSelected">
    <button >Event</button><button >Task</button>
    <button >Followup</button>
</div>

Then in the callback function, you just set the eventSelected to true.

[arepalli-praveenkumar]

Thanks for reply @twinssbc . My Problem got solved by your suggestion and I got another doubt.

In calendarDemoCtrl.js

$scope.loadEvents = function () {
   $scope.eventSource = createRandomEvents();
}

I Integrated your code in my Application .What are the changes I need to Do in calendar.js. Here is one of the sample object I have.I Want to display all the events ,tasks and followups in month,day and week

   $scope.loadEvents = function () {
        $scope.eventSource = [{
            activityId: 123,
            activityType: "Event",
            activityTypeId: 236,
            allDayEvent: "N",
            createdByName: "Praveenkumar Arepalli",
            creationDate: "2014-08-08 15:25:42",
            endDate: "Sun, Aug 10, 2014 05:30 AM",
            endTimeHour: "05",
            endTimeMeridian: "0",
            endTimeMinute: "30",
            startDate: "Sun, Aug 10, 2014 05:00 AM",
            startTimeHour: "05",
            startTimeMeridian: "0",
            startTimeMinute: "00",
            subject: "Birth day party"
        }]
     }

[twinssbc]

In the README file, there's a EventSource section describes the format of each event. So title, startTime, endTime and allDay fields are used by the calendar. If you want to display more things, you can add more stuff in the directives. If you want to display the events within a certain range, have a look at the rangeChanged option, it provides you a hook to change the eventSource based on the current range.

[arepalli-praveenkumar]

Hi @twinssbc I have another doubt Where did you initialized "event-source" in calendar.js Becuase I can find calendar-mode,range-changed and event-selected (Isolated scopes)in calendar.js How event-source="eventSource" are related ? In CalendarDemoCtrl.js $scope.eventSource = createRandomEvents(); I doubt is how outside variable is accessible in calendar directive like below?

   <calendar calendar-mode="mode" event-source="eventSource"
                      range-changed="reloadSource(startTime, endTime)"
                      event-selected="onEventSelected(event,$event)">

[twinssbc]

I use $parent to access the parent scope

    $scope.$parent.$watch('eventSource', function (value) {
        self.eventSource = value;
        if (self._onDataLoaded) {
            self._onDataLoaded();
        }
    });

[arepalli-praveenkumar]

Thanks alot @twinssbc We are requesting you to Implement "Today" button along with month ,week and day as like in fullcalendar http://arshaw.com/fullcalendar/

[arepalli-praveenkumar]

Hi @twinssbc I need to populate events in week.html and day.html

In week.html you are checking for ng-if="tm.events" then all the evetns are repeated. I printed "row" in

   function createDateObjects(startTime) {
      var times = [],
      row,
      time = new Date(startTime.getTime());
    for (var hour = 0; hour < 24; hour += 1) {
    row = [];
    for (var day = 0; day < 7; day += 1) {
        time.setHours(time.getHours() + hour);
        time.setDate(time.getDate() + day);
        row.push({
            time: new Date(time.getTime())
        });
    }

    for (var x = 1; x < row.length; x++) {
        if (row[x].events) {
            console.log(row[x]);  //not printed
        }
        console.log(row[x]); // few of the objects in row array printed with "events" 
    }
    times.push(row);
}
return times;
}

Where are you setting events in above code ?

My Sample event data
   {
     activityId: 57055
     allDayEvent: "N"
     description: "Have a lunch"
     endDate: "Tue, Jul 29, 2014 09:00 PM"
     endTimeHour: "09"
     endTimeMeridian: "1"
     endTimeMinute: "00"
     location: "Chennai"
     startDate: "Tue, Jul 29, 2014 08:30 PM"
     startTimeHour: "08"
     startTimeMeridian: "1"
     startTimeMinute: "30"
     subject: "Reception"
   }

Here is the description of all the fileds i have

     activityId             --Event Id
     allDayEvent        -- "Y/N"
     description          --Description of event
     endDate              --Event end Date with time
     endTimeHour      -- EndTime hour
    endTimeMeridian -- am/pm(0/1)
    endTimeMinute    --endTime minutes
    location                 --Location of the event
    startDate               --start Date of the event
    startTimeHour       --startTime hour
    startTimeMeridian -- am/pm(0/1)
    startTimeMinute    --startTime minutes
    subject                   --Subject of the Event

What are the changes i need do in calendar.js

[arepalli-praveenkumar]

Hi @twinssbc I want to Extend your plugin that need to support "Today" button.What are the changes I need to modify? Please help me in custom implementation of your plugin.

[twinssbc]

@praveenkumararepalliGit I added the ngModel binding so that you can set the currentCalendarDate in the parent scope. You can set whatever date you want and the calendar will jump to that date. Feel free to check the change in the demo page which includes the today button.

[arepalli-praveenkumar]

Thank you very much @twinssbc https://github.com/twinssbc

On Mon, Sep 1, 2014 at 3:54 AM, twinssbc notifications@github.com wrote:

@praveenkumararepalliGit https://github.com/praveenkumararepalliGit I added the ngModel binding so that you can set the currentCalendarDate in the parent scope. You can set whatever date you want and the calendar will jump to that date. Feel free to check the change in the demo page which includes the today button.

— Reply to this email directly or view it on GitHub https://github.com/twinssbc/AngularJS-ResponsiveCalendar/issues/6#issuecomment-54003327 .

Thanks & Regards: Praveenkumar Arepalli