✨ Release first version of event calendar

CHANGELOG.md

@@ -0,0 +1,41 @@
+commit c15fe7f09ae4597285de0f61a0517d0540ef8282 (HEAD -> master, origin/master)
+Author: Jonathan Germain <john.germain@hotmail.fr>
+Date:   Sat Nov 14 18:19:38 2020 +0100
+
+    :package: Create module with event components only
+
+commit 1f80ca1904ff4df844007cbd28952dd3fce36346 (tag: v0.1)         
+Author: Jonathan Germain <john.germain@hotmail.fr>
+Date:   Sat Nov 14 02:06:17 2020 +0100
+
+    :bookmark: Event Calendar Alpha version       
+
+commit 238abe30244fd5bda9ec9dad634ff005b9109dac   
+Author: Jonathan Germain <john.germain@hotmail.fr>
+Date:   Tue Nov 10 01:07:04 2020 +0100
+
+    :sparkles: Finishing Calendar views / Optimizing - Comments     
+
+commit 00e6e06ae34b0122bc7e52ccca334b7af41d8b4d   
+Author: Jonathan Germain <john.germain@hotmail.fr>
+Date:   Mon Nov 9 01:37:34 2020 +0100 
+
+    :fire: Finishing Event Calendar Interface     
+
+commit 5c88436170e8df796b7a8e23702326498b4b8ef1   
+Author: Jonathan Germain <john.germain@hotmail.fr>
+Date:   Fri Nov 6 01:04:39 2020 +0100 
+
+    :fire: almost there
+
+commit 0b58fe0f697cfe8e211fd1f40e23e94320b5308f   
+Author: Jonathan Germain <john.germain@hotmail.fr>
+Date:   Tue Oct 27 15:47:46 2020 +0100
+
+    ajout de la checkbox           
+
+commit 9cb61ba9df314c1b136d101b0532a52c56428cd2   
+Author: Jonathan Germain <john.germain@hotmail.fr>
+Date:   Thu Oct 22 01:49:37 2020 +0200
+
+    on avance avec angular calendar

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 GermainJonathan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,27 @@
+# NgEventCalendar
+
+Based on angular-calendar library, this library allows you to manage and display event as follow.
+Trying to do a full responsive calendar component.
+
+// README coming soon
+
+Live demo (Go to Angular Calendar tab): http://testpoc.fr/
+
+Support only 'fr' date format for now.
+
+# TodoList : 
+- Create the real README
+- Create the contributor file
+- Work on issues and evolution
+
+# Known Issues :
+- Depends on Angular material for the following components ('mat-button', 'mat-divider', 'mat-toggle-button')
+- Cannot divide event view component and calendar view component without bugs on sync
+
+# Evolutions :
+
+- Write tests
+- Support date format
+- Create / Delete / Update Events
+- Contextual menu
+- new optional display mode for events in calendar view

karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ng-event-calendar'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-event-calendar",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "ng-event-calendar",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^10.1.6",
+    "@angular/core": "^10.1.6",
+    "@angular/material": "^10.2.5",
+    "angular-calendar": "^0.28.22"
+  },
+  "author": {
+      "email": "john.germain@hotmail.fr",
+      "name": "Germain Jonathan"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}

src/lib/components/event-calendar-view/event-calendar-view.component.html

@@ -0,0 +1,53 @@
+<div class="viewSelector">
+    <mat-button-toggle-group [disabled]="monthSelect" #group="matButtonToggleGroup">
+        <mat-button-toggle value="mounth" [checked]="true" (click)="setView(CalendarView.Month)">
+          <mat-icon>view_module</mat-icon>
+        </mat-button-toggle>
+        <mat-button-toggle value="week" (click)="setView(CalendarView.Week)">
+          <mat-icon>view_week</mat-icon>
+        </mat-button-toggle>
+        <mat-button-toggle value="day" (click)="setView(CalendarView.Day)">
+          <mat-icon>view_agenda</mat-icon>
+        </mat-button-toggle>
+    </mat-button-toggle-group>
+</div>
+<div class="calendarHeader">
+    <button mat-button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (click)="periodChange()"><mat-icon>navigate_before</mat-icon></button>
+    <h2 style="margin: 10px 0 10px 0;" [ngStyle]="{'cursor': view === CalendarView.Month ? 'auto' : 'pointer'}" (click)="toggleWithMonthSelect()">
+      {{ viewDate | calendarDate:(view + 'ViewTitle'):locale:weekStartsOn}}
+    </h2>
+    <button mat-button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (click)="periodChange()"><mat-icon>navigate_next</mat-icon></button>
+</div>
+<evt-ca-month-select *ngIf="monthSelect" [yearView]="actualYearView" (monthChanged)="monthSelected($event)"></evt-ca-month-select>
+<div>
+    <mwl-calendar-week-view [ngStyle]="{'display': view == CalendarView.Week ? 'unset' : 'none'}" [viewDate]="viewDate" [weekStartsOn]="weekStartsOn" [locale]="locale" [refresh]="refresh" [headerTemplate]="defaultWeekHeaderTemplate" (dayHeaderClicked)="handleWeekClicker($event.day)" (beforeViewRender)="beforeWeekViewRender($event)"></mwl-calendar-week-view>
+    <mwl-calendar-month-view [ngStyle]="{'display': (view == CalendarView.Week || view == CalendarView.Day || monthSelect) ? 'none' : 'unset'}" [cellTemplate]="customCellTemplate" [viewDate]="viewDate" [locale]="locale" [weekStartsOn]="weekStartsOn" [refresh]="refresh" (dayClicked)="handlerMonthClicker($event.day)" (beforeViewRender)="beforeMonthViewRender($event)"></mwl-calendar-month-view>
+</div>
+
+<evt-ca-events-view [events]="eventsDisplayed"></evt-ca-events-view>
+
+<ng-template #defaultWeekHeaderTemplate let-days="days" let-locale="locale" let-trackByWeekDayHeaderDate="trackByWeekDayHeaderDate" let-dayHeaderClicked="dayHeaderClicked">
+    <div class="cal-day-headers" role="row">
+        <div class="cal-header" *ngFor="let day of days; trackBy: trackByWeekDayHeaderDate" (mwlClick)="dayHeaderClicked.emit({ day: day, sourceEvent: $event })" [class.cal-past]="day.isPast" [class.cal-today]="day.isToday" [class.cal-future]="day.isFuture" [class.cal-weekend]="day.isWeekend" [ngClass]="day.cssClass" tabindex="0" role="columnheader">
+            <b>{{ day.date | calendarDate: 'weekViewColumnHeader':locale }}</b><br />
+            <span>{{ day.date | calendarDate: 'weekViewColumnSubHeader':locale }}</span>
+            <div *ngIf="day.events && day.events.length > 0" class="weekBadgeContainer">
+                <div *ngFor="let event of day.events" class="badge" style="height: 6px; width: 6px;" [ngStyle]="{'background': event.color ? event.color : '#0b5999'}">
+                    <!-- <span>{{day.events.length > 1 ? day.events.length : ''}}</span> -->
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #customCellTemplate let-day="day" let-locale="locale">
+    <div class="cal-cell-top">
+        <span class="cal-day-badge" *ngIf="day && day.badgeTotal > 0">{{ day.badgeTotal }}</span>
+        <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
+        <div style="display: inline-flex; justify-content: center;">
+            <div *ngFor="let event of day.events" class="badge" [ngStyle]="{'background': event.color ? event.color : '#0b5999'}">
+                <!-- <span>{{day.events.length > 1 ? day.events.length : ''}}</span> -->
+            </div>
+        </div>
+    </div>
+</ng-template>

src/lib/components/event-calendar-view/event-calendar-view.component.scss

@@ -0,0 +1,149 @@
+$breakpoint-tablet: 768px;
+
+.calendarHeader {
+  display: flex;
+  justify-content: space-between;
+}
+
+::ng-deep .cal-week-view,
+::ng-deep .cal-month-view {
+  background-color: inherit;
+  border: none;
+}
+
+::ng-deep .cal-week-view .cal-header:focus,
+::ng-deep .cal-month-view .cal-cell:focus {
+  outline: none;
+}
+
+::ng-deep .cal-week-view .cal-day-headers .cal-header:not(:last-child),
+::ng-deep .cal-week-view .cal-day-headers .cal-header,
+::ng-deep .cal-week-view .cal-day-headers {
+    & .cal-today {
+        background-color: inherit;
+        text-align: center;
+        > span {
+            background: #009688;
+            color: #fff;
+            border: 2px solid transparent;
+            border-radius: 50%;
+            height: 20px;
+            width: 20px;
+            font-weight: bold;
+            font-size: 1.2em;
+            padding: 1px;
+        }
+    }
+    > span {
+        font-weight: bold;
+        font-size: 1.2em;
+        line-height: 6em;
+        padding: 1px;
+    }
+    border: none;
+    padding: 0;
+}
+
+::ng-deep .cal-month-view .cal-day-cell.cal-today .cal-day-number {
+  background: #009688;
+  color: #fff;
+  font-size: 1.2em;
+}
+
+::ng-deep .cal-month-view .cal-day-number {
+  padding: 1px;
+  font-weight: bold;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  height: 20px;
+  width: 20px;
+  font-size: 1.2em;
+  text-align: center;
+}
+
+::ng-deep .cal-week-view * {
+    box-sizing: unset;
+}
+
+::ng-deep .selected {
+  > div > .cal-day-number {
+    background: #0b5999 !important;
+    color: #fff;
+  }
+}
+
+::ng-deep .cal-month-view .cal-day-cell.cal-today {
+  background-color: initial;
+}
+
+::ng-deep .cal-month-view .cal-cell-top {
+    display: flex;
+    flex-direction: column;
+    max-height: 75px;
+}
+
+::ng-deep .cal-day-headers > .selected {
+    > span {
+      font-size: 1.2em;
+      background: #0b5999 !important;
+      color: #fff;
+      border: 2px solid transparent;
+      border-radius: 50%;
+      height: 20px;
+      width: 20px;
+      text-align: center;
+    }
+  }
+
+::ng-deep .cal-week-view .cal-time-events {
+    display: none;
+}
+
+::ng-deep .cal-month-view .cal-day-badge {
+    display: none;
+}
+
+.weekBadgeContainer {
+    justify-content: center;
+    padding-bottom: 20px;
+    display: flex;
+}
+
+.badge {
+    font-size: 1em;
+    background: #0b5999;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    min-height: 6px;
+    min-width: 6px;
+    text-align: center;
+    align-self: center;
+    margin-right: 2px;
+    display: inline-flex;
+}
+
+@media (min-width: $breakpoint-tablet) {
+  .badge {
+    margin-top: 17px;
+  }
+}
+
+@media (max-width: $breakpoint-tablet) {
+  ::ng-deep .cal-month-view .cal-day-cell:not(:last-child) {
+    border: none;
+    align-items: center;
+  }
+
+  ::ng-deep .cal-month-view .cal-day-cell {
+    min-height: unset;
+    align-items: center;
+  }
+
+  ::ng-deep .cal-month-view .cal-day-number {
+    margin-right: 0;
+  }
+
+  ::ng-deep .cal-month-view .cal-days {
+    border: none;
+  }
+}

src/lib/components/event-calendar-view/event-calendar-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventCalendarViewComponent } from './event-calendar-view.component';
+
+describe('EventCalendarViewComponent', () => {
+  let component: EventCalendarViewComponent;
+  let fixture: ComponentFixture<EventCalendarViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EventCalendarViewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EventCalendarViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});