Angular JS добавляет URL или событие ng-click на дату Календаря

0

Прежде всего, я очень новичок в системе Angular JS, я внедряю Angular Calender. Для того, чтобы щелкнуть по дате, я хочу вызвать метод. Как я могу вызвать вызов метода href или ng-click?

Пожалуйста, предложите, как дать вызов метода через скрипт!

<!DOCTYPE html>
<html lang="en" ng-app="calendarDemoApp" id="top">

<head>
  <title>AngularUI Calendar for AngularJS</title>
  <link rel="icon" href="favicon.ico" />
  <link rel="stylesheet" href="/../bower_components/bootstrap-css/css/bootstrap.css" />
  <link rel="stylesheet" href="/../bower_components/fullcalendar/dist/fullcalendar.css">
  <link rel="stylesheet" href="calendarDemo.css" />

  <script src="../bower_components/jquery/dist/jquery.js"></script>

  <script src="../bower_components/angular/angular.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
  <script src="../bower_components/moment/moment.js"></script>
  <script src="../bower_components/fullcalendar/dist/fullcalendar.js"></script>
  <script src="../bower_components/fullcalendar/dist/gcal.js"></script>
  <script src="../src/calendar.js"></script>
  <script src="calendarDemo.js"></script>
</head>

<body data-spy="scroll">
  <header class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <div class="dropdown pull-left">
          <a class="brand dropdown-toggle" role="button" data-toggle="dropdown" href="#">
                        AngularUI
                        <b class="caret"></b>
                    </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="https://github.com/angular-ui/"><strong>Related Projects:</strong></a></li>
            <li class="divider"></li>
            <li><a href="http://angular-ui.github.com/bootstrap/">Bootstrap</a></li>
            <li><a href="http://angular-ui.github.com/ng-grid/">Grid</a></li>
            <li><a href="https://github.com/angular-ui/AngularJs.tmbundle">AngularJS.tmbundle</a></li>
            <li><a href="http://angular-ui.github.io/ui-router/sample/">Router <span
                                class="label label-success">New!</span></a></li>
            <li><a href="http://angular-ui.github.com/Tips-n-Tricks/">Tips-n-Tricks <span
                                class="label">WIP</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>
  <div class="hero-unit">
    <div class="container">
      <h1>UI Calendar</h1>
      <p>A complete AngularJS directive for the <a href="http://arshaw.com/fullcalendar/">Arshaw FullCalendar</a>.</p>
      <p class="btn-group">
        <a href="https://github.com/angular-ui/ui-calendar" class='btn'><i class='icon-github'></i> Code on Github</a>
        <a href="https://github.com/angular-ui/ui-calendar/archive/master.zip" class='btn btn-primary'><i class="icon-download-alt icon-white"></i> Download <small>(0.8.1)</small></a>
      </p>
    </div>
    <div class="bs-docs-social">
      <div class="container">
        <ul class="bs-docs-social-buttons">
          <li>
            <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&amp;repo=ui-calendar&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
          </li>
          <li>
            <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&amp;repo=ui-calendar&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
          </li>
          <li>
            <div class="g-plusone" data-size="medium"></div>
            <!-- Place this tag after the last +1 button tag. -->
            <script type="text/javascript">
              (function() {
                var po = document.createElement('script');
                po.type = 'text/javascript';
                po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(po, s);
              })();
            </script>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div role="main">
    <div class="container">
      <section id="directives-calendar" ng-controller="CalendarCtrl">
        <div class="page-header">
          <h1>UI-Calendar</h1>
        </div>

        <h3>Calender</h3>
        <pre class="prettyprint linenums">
                &lt;div ui-calendar="{{uiConfig.calendar}}" class="span8 calendar" ng-model="eventSources"&gt;&lt;/div&gt; 
            </pre>
      </section>
    </div>
  </div>

Код Javascript:

  /**
   * calendarDemoApp - 0.9.0
   */
  angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);

  function CalendarCtrl($scope, $compile, uiCalendarConfig) {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $scope.changeTo = 'Hungarian';
    /* event source that pulls from google.com */
    $scope.eventSource = {
      url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
      className: 'gcal-event', // an option!
      currentTimezone: 'America/Chicago' // an option!
    };
    /* event source that contains custom events on the scope */
    $scope.events = [{
      title: 'All Day Event',
      start: new Date(y, m, 1)
    }, {
      title: 'Long Event',
      start: new Date(y, m, d - 5),
      end: new Date(y, m, d - 2)
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d - 3, 16, 0),
      allDay: false
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d + 4, 16, 0),
      allDay: false
    }, {
      title: 'Birthday Party',
      start: new Date(y, m, d + 1, 19, 0),
      end: new Date(y, m, d + 1, 22, 30),
      allDay: false
    }, {
      title: 'Click for Google',
      start: new Date(y, m, 28),
      end: new Date(y, m, 29),
      url: 'http://google.com/'
    }];
    /* For Title i want to assign href or ng-click */

    /* event source that calls a function on every view switch */
    $scope.eventsF = function(start, end, timezone, callback) {
      var s = new Date(start).getTime() / 1000;
      var e = new Date(end).getTime() / 1000;
      var m = new Date(start).getMonth();
      var events = [{
        title: 'Feed Me ' + m,
        start: s + (50000),
        end: s + (100000),
        allDay: false,
        className: ['customFeed']
      }];
      callback(events);
    };

    $scope.calEventsExt = {
      color: '#f00',
      textColor: 'yellow',
      events: [{
        type: 'party',
        title: 'Lunch',
        start: new Date(y, m, d, 12, 0),
        end: new Date(y, m, d, 14, 0),
        allDay: false
      }, {
        type: 'party',
        title: 'Lunch 2',
        start: new Date(y, m, d, 12, 0),
        end: new Date(y, m, d, 14, 0),
        allDay: false
      }, {
        type: 'party',
        title: 'Click for Google',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        url: 'http://google.com/'
      }]
    };
    /* alert on eventClick */
    $scope.alertOnEventClick = function(date, jsEvent, view) {
      $scope.alertMessage = (date.title + ' was clicked ');
    };
    /* alert on Drop */
    $scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view) {
      $scope.alertMessage = ('Event Dropped to make dayDelta ' + delta);
    };
    /* alert on Resize */
    $scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view) {
      $scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
    };
    /* add and removes an event source of choice */
    $scope.addRemoveEventSource = function(sources, source) {
      var canAdd = 0;
      angular.forEach(sources, function(value, key) {
        if (sources[key] === source) {
          sources.splice(key, 1);
          canAdd = 1;
        }
      });
      if (canAdd === 0) {
        sources.push(source);
      }
    };
    /* add custom event*/
    $scope.addEvent = function() {
      $scope.events.push({
        title: 'Open Sesame',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        className: ['openSesame']
      });
    };
    /* remove event */
    $scope.remove = function(index) {
      $scope.events.splice(index, 1);
    };
    /* Change View */
    $scope.changeView = function(view, calendar) {
      uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
    };
    /* Change View */
    $scope.renderCalender = function(calendar) {
      if (uiCalendarConfig.calendars[calendar]) {
        uiCalendarConfig.calendars[calendar].fullCalendar('render');
      }
    };
    /* Render Tooltip */
    $scope.eventRender = function(event, element, view) {
      element.attr({
        'tooltip': event.title,
        'tooltip-append-to-body': true
      });
      $compile(element)($scope);
    };
    /* config object */
    $scope.uiConfig = {
      calendar: {
        height: 450,
        editable: true,
        header: {
          left: 'title',
          center: '',
          right: 'today prev,next'
        },
        eventClick: $scope.alertOnEventClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventRender: $scope.eventRender
      }
    };

    $scope.changeLang = function() {
      if ($scope.changeTo === 'Hungarian') {
        $scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
        $scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
        $scope.changeTo = 'English';
      } else {
        $scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        $scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        $scope.changeTo = 'Hungarian';
      }
    };
    /* event sources array*/
    $scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
    $scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
  }
Теги:

1 ответ

0

Вы должны предпочесть использовать угловой бутстрап-календарь из mattlewis92: https://github.com/mattlewis92/angular-bootstrap-calendar

Используйте директиву mwl-calendar для календаря на своей странице, а затем настройте требуемый шаблон. Например, если вам нужно добавить функцию обратного вызова в дату, нажмите, вы должны изменить представление месяца, добавив ng-click в шаблон calendarMonthCell, где хотите.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню