Etkinlik sayfası Örneği

        <div ui-view></div>

        <div class="page-header" id="heading"><h1>Etkinlik Merkezi</h1></div>

        <div ui-calendar ng-model="eventSources"></div>

        <br>

        <input type="button" value="Etkinlik Ekle" class="btn btn-primary btn-block" ng-click="toggleCustom()">

        <br>

        <div ng-hide="custom" class="container">

            <form>

                <div class="form-group">

                    <lable class="control-label col-sm-2"><b>Başlık</b></lable>

                    <input type="text" id="eventText" ng-model="title" class="form-control">

                </div>

                <div class="form-group">

                    <lable class="control-label col-sm-2"><b>Açıklama</b></lable>

                    <textarea type="" id="sDate" ng-model="discription" class="form-control" rows="5"></textarea>

                </div>

                <div class="form-group">

                    <lable class="control-label col-sm-2"><b>Başlanğıc Tarihi</b></lable>

                    <input type="date" id="sDate" ng-model="sdate" class="form-control">

                </div>

                <div class="form-group">

                    <lable class="control-label col-sm-2"><b>Bitiş tarihi</b></lable>

                    <input type="date" id="eDate" ng-model="edate" class="form-control">

                </div>

Bu kod, bir AngularJS uygulamasının HTML görünümünü tanımlar.

- <div ui-view></div> etiketi, AngularJS UI Router ile kullanılan bir yönlendirme yapılandırmasıdır.

- <div class="page-header" id="heading"><h1>Etkinlik Merkezi</h1></div> etiketi, belgenin başlığını tanımlar ve Bootstrap tarafından sağlanan bir başlık biçimlendirme öğesidir.

- <div ui-calendar ng-model="eventSources"></div> etiketi, FullCalendar kütüphanesi tarafından sağlanan bir etkinlik takvimini görüntüler.

- <input type="button" value="Etkinlik Ekle" class="btn btn-primary btn-block" ng-click="toggleCustom()"> etiketi, etkinlik eklemek için bir düğme sağlar ve AngularJS tarafından sağlanan bir tıklama olayı tetikleyicisine sahiptir.

- <div ng-hide="custom" class="container"> etiketi, etkinlik eklemek için bir form görüntüler ve AngularJS tarafından sağlanan bir görünüm denetleyicisi ile kontrol edilir.

- <form> etiketi, form elemanlarını gruplamak için kullanılır.

- <div class="form-group"> etiketi, bir form elemanı grubunu tanımlar.

- <label class="control-label col-sm-2"><b>Başlık</b></label> etiketi, bir form etiketidir ve belirtilen metni görüntüler.

- `<input type="text" id="eventText" ng-model="title" class="form-control">` etiketi, bir metin giriş kutusu oluşturur ve AngularJS tarafından sağlanan bir model değişkeni ile ilişkilendirilir.

- `<textarea type="" id="sDate" ng-model="discription" class="form-control" rows="5"></textarea>` etiketi, bir çok satırlı metin giriş kutusu oluşturur ve AngularJS tarafından sağlanan bir model değişkeni ile ilişkilendirilir.

- `<input type="date" id="sDate" ng-model="sdate" class="form-control">` ve 

`<input type="date" id="eDate" ng-model="edate" class="form-control">` etiketleri, tarih giriş kutuları oluşturur ve AngularJS tarafından sağlanan model değişkenleri ile ilişkilendirilir.

            <br>

                <table border="1" class="table table-bordered">

                    <tr>

                        <th>File</th>

                    </tr>

                    <tr ng-repeat="file in files">

                        <td><span>{{file.name}}</span></td>

                    </tr>

                </table>

                <div>

                    <input type="button" id="save" value="Etkinlik Ekle" ng-click="addEvent()" class="btn btn-info btn-block">

                    <button type="reset" value="Reset" class="btn btn-warning btn-block">Sıfırla</button>

                    <input type="button" class="btn btn-success btn-block" data-toggle="modal" data-target="#myModal" ng-click="print()" value="Print">

                </div>  

            </form>

      <div>

        <input type="button" id="save" value="Etkinlik Ekle" ng-click="addEvent()" class="btn btn-info btn-block">

        <button type="reset" value="Reset" class="btn btn-warning btn-block">Sıfırla</button>

           <input type="button" class="btn btn-success btn-block" data-toggle="modal" data-target="#myModal" ng-click="print()" value="Print">

      </div>  

        </form>

         <div class="container">

            <div class="modal fade" id="myModal" role="dialog">

              <div class="modal-dialog">

                 <div class="modal-content">

                     <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal">&times;</button>

                             <h4 class="modal-title">Etkinlik Merkezi Seçeneği </h4>

                     </div>

                       <div class="modal-body">

                         <form border="1">

                            <p>Etkinlik Merkezi'ın sizin için en iyi hizmeti sunabilmesi için lütfen aşağıdaki bilgileri doldurun.</p><h4>Teslimat Adresi:</h4>

                              <input type="radio" name="meeting">Toplantı Sahibi - Teslimat, toplantı zamanından bir iş günü önce gerçekleştirilecektir.<br>

                               <input type="radio" name="meeting">Toplantı Sahibi - Teslimat, toplantı zamanından 15 dakika önce gerçekleştirilecektir.<br>

                                <textarea class="form-control" rows="5" placeholder="Eğer tüm siparişinizle ilgili herhangi özel talimatınız varsa, lütfen buraya girin..."></textarea>

                                    <table border="1" class="table table-bordered">

                                        <tr>

                                             <th>File</th>

                                             <th>Print</th>

                                             <th>Renk</th>

                                             <th>Notlar</th>

                                        </tr>

                                        <tr ng-repeat="file in files">

                                            <td>{{file.name}}</td>

                                            <td><input type="checkbox"></td>

                                            <td><input type="checkbox"></td>

                                            <td><input type="textarea"></td>

                                        </tr>

                                    </table>

                                    <div class="modal-footer">

                                        <span>*Dosya, Print Center ile uyumlu değil.</span>

                                        <input type="button" class="btn btn-default" data-dismiss="modal" ng-click="submit()" value="Gönder">

                                        <button type="button" class="btn btn-default" data-dismiss="modal">İptal Et</button>

Bu kodlar bir HTML formu içerir. Form, bir etkinlik merkezine bilgi göndermek ve sipariş vermek için kullanılır. Form, iki bölümden oluşur: bir tablo ve bir modal pencere.

Tablo, kullanıcının dosya adlarını ve dosyaların çıktı alınıp alınmayacağını, renk seçeneklerini ve özel notları belirtmesini sağlar. Dosyalar, "ng-repeat" özelliğiyle birlikte "files" adlı bir değişkenden alınır.

Modal penceresi, kullanıcının etkinlik merkezine bir sipariş göndermek için doldurması gereken bilgileri içerir. Modal penceresi, "myModal" adlı bir "div" etiketi içinde yer alır. Modal penceresi, bir "modal fade" özelliği ve "id" özelliğiyle tanımlanır. Modal penceresinin içeriği, "modal-content" adlı bir "div" etiketi içinde yer alır ve bir başlık, bir form ve bir altbilgi alanı içerir.

Form, teslimat adresi seçenekleri, bir açıklama alanı ve dosya tablosu ile birlikte, kullanıcının sipariş vermesi için gerekli tüm bilgileri sağlar. Dosya tablosu, kullanıcının dosya adlarını, çıktı alıp almayacaklarını, renk seçeneklerini ve özel notlarını belirtmesine olanak tanır. "ng-repeat" özelliğiyle birlikte "files" adlı bir değişkenden alınır. Form, "submit()" ve "ng-click" özellikleriyle birlikte "Gönder" düğmesi ve "İptal Et" düğmesi içerir.

CSS:

VSCode paintjob.css adlı dosya oluşturmamız gerekiyor ilk önce 

Package.json dosyası:

{

  "name": "angularjs_calendar_ui",

  "version": "1.0.0",

  "description": "This is a AngularJS application where I have used Angular UI-Calendar. ",

  "main": "",

  "dependencies": {

    "@uirouter/angularjs": "^1.0.4",

    "angular-bootstrap": "^0.12.2",

    "angular-moment": "^1.0.1",

    "angular-ui-calendar": "^1.0.2",

    "moment": "^2.18.1"

  },

  "devDependencies": {},

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "sudipta",

  "license": "ISC"

}

Bu bir Node.js projesinin package.json dosyasıdır ve proje, AngularJS çerçevesi ile oluşturulmuş bir takvim uygulamasıdır. 

"dependencies" özellikleri, projenin çalışması için gerekli olan paketlerin sürümlerini içerir. Bu paketler şunlardır:

- "@uirouter/angularjs": AngularJS uygulamaları için bir yönlendirme çerçevesidir.

- "angular-bootstrap": Bootstrap CSS framework'ünün AngularJS için bir uygulama modülüdür.

- "angular-moment": Moment.js kütüphanesinin AngularJS için bir uygulama modülüdür. Bu kütüphane, tarih ve saat işleme işlevleri sağlar.

- "angular-ui-calendar": AngularJS uygulamaları için bir takvim bileşenidir.

- "moment": Tarih ve saat işleme işlevleri sağlayan bir JavaScript kütüphanesidir.

"devDependencies" özellikleri, yalnızca geliştirme sırasında kullanılan paketleri içerir.

"scripts" özellikleri, proje için tanımlanmış bir test script'ini içerir.

"author" özelliği, projenin yazarını belirtir.

"license" özelliği, projenin kullanım lisansını belirtir.

AngularJS belgesi:

İlk önce printfile.js adlı dosya açıyoruz:

var app = angular.module('PrintCenter', ['ui.bootstrap','ui.calendar']);

app.directive('chooseFiles',['$parse',  function ($parse) {

    return {

        restrict: 'A',

        scope: true,

        link: function (scope, element, attachments){

            element.bind('change', function () {

                $parse(attachments.chooseFiles).assign(scope, element[0].files);

                scope.$apply()

            });

        }

    }

}]);+

Bu bir AngularJS uygulamasıdır. 

İlk satırda, "PrintCenter" adlı bir Angular modülü tanımlanır. Bu modül, "ui.bootstrap" ve "ui.calendar" adlı diğer iki modüle bağımlıdır.

İkinci satırda, "chooseFiles" adında bir direktif tanımlanır. Bu direktif, bir dosya seçme işlemi gerçekleştirir. 

"restrict" özelliği, direktifin nasıl kullanılabileceğini belirtir. Bu durumda, "A" olarak belirlenmiştir, yani direktif yalnızca bir öznitelik olarak kullanılabilir.

"scope" özelliği, direktifin izole bir kapsamda çalışacağını belirtir. Bu kapsam, direktifin kullanıldığı öğenin kapsamıyla bağlantılı olmayacak ve izole bir alan sağlayacaktır.

"link" fonksiyonu, direktifin öğeye bağlanmasını ve çalışmasını sağlar. Bu durumda, dosya seçim kutusu değiştiğinde, seçilen dosyaları kapsamdaki "chooseFiles" adlı bir değişkene atayan bir işlev gerçekleştirir. 

"$parse" servisi, bir dize olarak belirtilen bir ifadeyi, kapsamdaki bir değişkene atamak için kullanılır. "assign" fonksiyonu, belirtilen bir ifadeye değer atar ve değişiklikleri kapsama yansıtmak için "scope.$apply()" fonksiyonu kullanılır.

Servisin özellikleri şunlardır:

- "events" ve "events2" adlı iki boş diziye sahiptir. Bu diziler, servisin içindeki veri depolama alanlarıdır.

- "added_event_short" adlı bir nesneye sahiptir. Bu nesne, "start" ve "title" adlı iki özelliği olan bir kısa etkinlik tanımıdır.

- "addData" adlı bir yöntemi vardır. Bu yöntem, bir nesne parametresi alır ve "events2" dizisine ekler. Daha sonra, $rootScope.$broadcast("gDataUpdated") yöntemi çağrılır, bu da servisin verilerinin güncellendiğini tüm uygulama bileşenlerine bildirir.

Bu servis, uygulama bileşenlerinde veri depolama ve paylaşımı için kullanılabilir. Servis, veri değişikliklerini izleyebilir ve uygulama bileşenleri arasında veri güncellemelerini iletebilir.

app.controller('uploadFiles', ['$scope', '$http', 'gDataService', '$timeout', function($scope, $http, gDataService, $timeout){

    $scope.changedFile = function(element){

    $scope.files = element.files;

    $scope.$apply();

    }

    $scope.custom = true;

    $scope.toggleCustom = function() {

            $scope.custom = $scope.custom === false ? true: false;

    };

    $scope.submit = function(){

        confirm("Print Successful");

    }

    var date = new Date();

    var d = date.getDate();

    var m = date.getMonth();

    var y = date.getFullYear(); 

Bu kod, AngularJS kullanarak bir dosya yükleme formu oluşturmak için bir denetleyici (controller) tanımlar. Denetleyiciye `$scope`, `$http`, `gDataService` ve `$timeout` gibi AngularJS hizmetleri enjekte edilir.

`$scope.changedFile` işlevi, dosya yükleme formundaki dosya seçimi değiştiğinde tetiklenir ve seçilen dosyalar `$scope.files` değişkeninde depolanır.

`$scope.custom` değişkeni başlangıçta `true` olarak ayarlanır ve `$scope.toggleCustom` işlevi, her çağrıldığında bu değişkenin tersine çevrilmesini sağlar.

`$scope.submit` işlevi, dosya yükleme formu gönderildiğinde tetiklenir ve basit bir onay ile sonuçlanır.

`var date = new Date();` ile yeni bir `Date` nesnesi oluşturulur ve değişkenler `d`, `m` ve `y` sırasıyla gün, ay ve yılın değerlerini alır. Ancak, bu değişkenlerin sonradan herhangi bir yerde kullanılmadığı görülüyor.

 $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)},

      {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/'}

    ];

Bu kod, bir AngularJS takvim uygulaması için olaylar (events) dizisi tanımlar. Bu olaylar takvimde gösterilecek etkinlikleri temsil eder.

Her etkinlik bir nesne olarak tanımlanır ve nesneler `title`, `start`, `end`, `allDay` ve `url` özelliklerine sahiptir. Aşağıdaki özelliklerin açıklamaları şöyledir:

- `title`: Etkinliğin adı.

- `start`: Etkinliğin başlangıç tarihi ve saati. `new Date(y, m, d, [h, m, s])` şeklinde oluşturulabilir.

- `end`: Etkinliğin bitiş tarihi ve saati. Opsiyonel olarak tanımlanabilir. `new Date(y, m, d, [h, m, s])` şeklinde oluşturulabilir.

- `allDay`: Etkinliğin gün boyu sürdüğüne dair bir işaretleyici. `true` veya `false` değerini alabilir. Varsayılan değeri `true`'dır.

- `url`: Etkinliğe ilişkin ayrıntılı bilgilerin bulunduğu bir sayfanın URL'si. Tıklanabilir bir bağlantı olarak gösterilir.

Bu örnekteki olaylar, takvimde bir "Tüm Gün Etkinliği", bir "Uzun Süreli Etkinlik", bir "Doğum Günü Partisi" ve "Google'a Git" adında bir etkinlik içerir. `new Date()` fonksiyonu, JavaScript'deki standart `Date` nesnesinin bir örneği oluşturmak için kullanılır. `y`, `m` ve `d` değişkenleri, önceki kod bloğundan gelir ve sırasıyla yıl, ay ve gün değerlerini tutarlar.

    $scope.addEvent = function (title, sdate, edate) {

        console.log($scope);

        var eventObj = {

            title: $scope.title,

            discription: $scope.discription,  

            start: new Date($scope.sdate),

            end: new Date($scope.edate),              

      };

            console.log(eventObj);

            $scope.events.push(eventObj);

            $scope.eventSources = [$scope.events, $scope.eventSource]    

    };

Bu kod, AngularJS framework kullanarak bir takvim uygulamasına yeni bir etkinlik eklemeyi sağlar. 

İşlev, `$scope.addEvent` adında bir AngularJS denetleyicisinde tanımlanmıştır. Bu fonksiyon, üç parametre alır: `title` (etkinliğin başlığı), `sdate` (etkinliğin başlangıç tarihi) ve `edate` (etkinliğin bitiş tarihi).

İlk olarak, `$scope` nesnesi `console.log` ile yazdırılır. Bu, etkinlik eklenirken kullanılacak verilerin alındığı `$scope` nesnesinin içeriğini incelemek için yararlı bir adımdır.

Daha sonra, `eventObj` adında bir nesne oluşturulur. Bu nesne, etkinliğin özelliklerini depolar. `title` ve `discription` özellikleri, `title` ve `discription` parametreleriyle aynı değerlere sahiptir. `start` ve `end` özellikleri, sırasıyla `sdate` ve `edate` parametreleri tarafından belirtilen tarihlerdeki saatleri içeren JavaScript `Date` nesneleridir.

`eventObj` nesnesi de `console.log` ile yazdırılır. Bu, `eventObj` nesnesinin içeriğini kontrol etmek için yararlı bir adımdır.

`eventObj` nesnesi, `$scope.events` dizisine (`$scope.events.push(eventObj)`) eklenir. Bu, takvimde görüntülenecek tüm etkinliklerin listesini tutan bir diziye yeni bir etkinlik ekler.

Son olarak, `$scope.eventSources` özelliği, `$scope.events` dizisi ve `$scope.eventSource` özelliği arasındaki dizi birleştirmesiyle güncellenir (`$scope.eventSources = [$scope.events, $scope.eventSource]`). Bu, takvimde görüntülenecek tüm etkinliklerin listesini içeren bir dizi oluşturur.

    $scope.eventSources = [$scope.events, $scope.eventSource];

}]);  

Bu kod, bir AngularJS denetleyicisi içinde tanımlanmış bir `$scope.eventSources` özelliğini günceller.

`$scope.eventSources` özelliği, takvimde görüntülenecek tüm etkinlikleri içeren bir diziye eşitlenir. Bu dizi, `$scope.events` ve `$scope.eventSource` dizilerini birleştiren bir dizi oluşturur

`$scope.events` dizi, tüm etkinliklerin listesini içeren bir dizi olarak tanımlanmıştır. Yeni bir etkinlik eklendiğinde, bu diziye eklenir.

`$scope.eventSource` dizisi, takvimde görüntülenecek diğer kaynakları içeren bir dizi olarak tanımlanmıştır. Bu kaynaklar, takvimdeki görüntülenen etkinliklerin yanı sıra diğer unsurlar da olabilir (örneğin, tatil günleri veya doğum günler

`$scope.eventSources` özelliği, takvim bileşenine tüm kaynakları sağlar. Bu, takvim bileşeninin etkinlikleri ve diğer kaynakları göstermesine olanak tanır.

Bu kod aynı zamanda, AngularJS denetleyicisinin sonunu gösterir. Denetleyicinin tüm işlevselliği bu kapatma parantezi içinde yer alır.