ABCalendar

Note & Description

OPTIMIZED FOR BOOTSTRAP 5

The ABCalender was programmed, because there is still no usable calendar with year view, which is easy to use and therefore ideal for beginners. Configurable values:

• Initial view

• Initial Date

• Event input

• View selection (year/month/week/day)

• Language or Object with LocalValue

• Theme

• UseTitle

• Event output (on Click (on Event))

• Event change (on Drop Event (Drag'n'Drop))

• Date output (on Click (on Date))

• Date change (on Click (prev/today/next button))

• View Change (on Click (year/month/week/day button))

Setup a program with ABCalendar

1. Generate Program

• Write in cmd: ng new program-name
• Add routing if you want and choose scss as Style

2. Install Bootstrap

• Bootstrap:
  • If you use Bootstrap 4.6.0 or lower, you maybe need to install jQuery, too
  • Run npm i bootstrap in your terminal
  • Add the following to your angular.json-file:

  "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.min.css",
             "src/styles.scss"
            ],
  "scripts": [
             "node_modules/bootstrap/dist/js/bootstrap.js"
             ]
  

  WARNING: YOU NEED TO ADD THIS CODE TWICE IN THE ANGULAR.JSON-FILE

3. Install ABCalendar

• Run npm i abcalendar in your terminal
• Add AbcalendarLibModule to your app.module.ts
  • example:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import {AbcalendarLibModule} from 'abcalendar';
    
    @NgModule({
    declarations: [
      AppComponent
    ],
      imports: [
          BrowserModule,
          AppRoutingModule,
          AbcalendarLibModule
      ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    

4. Setup ABCalendar

• Smallest required text in component.html:

  <lib-abcalendar-lib>
  </lib-abcalendar-lib>
  

• config examples for Input-Values:

  • config for [views]:

    • in .html:

    [views] = "['year','month','week','day']"
    

  • config for [initialView]:

    • in .html:

    [initialView]="'month'"
    

  • config for [initialDate]:

    • in .html:

    [initialDate] = "setInitialDate()"
    

    • in .ts:

    setInitialDate(): Date {
        return new Date(Date.now());
    }
    

  • config for language

    • config for [language]:
      • in .html:

      [language] = "'en-Us'"
      

      If your required language is not among the following, please refer to the paragraph config for [localeValue] to implement your own language.
      'en-..','de-..','ru-..','zh-..','es-..','it-..','fr-..'
      PLEASE NOTE: Here the exact pattern must be followed!
    • config for [localeValue]:
      • in .html:

      [localeValue] = "setLocaleValue()"
      

      • in .ts:

      import {Local} from 'abcalendar';
      .
      .
      .
      setLocaleValue(): Local {
          return {
            weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            others: ['Year', 'Week', 'Month', 'Day', 'Today', 'All Day']
                  };
      }
      

  • config for [events]:

    • in .html:

    [events] = "getEvents()"
    

    • in .ts with own Input:

    import {Item} from 'abcalendar';
    .
    .
    .
    getEvents(): Item {
    const date = new Date(Date.now());
    return [{itemId: 1, title: 'aTitle', dateOfExpiry: date, color: '#000'}];
    }
    

    • in .ts with language Input:

    return {lang: 'en-US'};
    

    -> string must be in locale-Format (example: en-US, de-De)

  • config for [events]:

    • in .html:

      [useTitle] = "true"
      
      or
      
      useTitle
      

    • default is 'false'

    • usage of (eventEmitter):

      • in .html:

      (eventEmitter) = "setItem($event)"
      

      • in .ts:

      setItem($event): void {
          console.log($event.title);
          console.log($event.itemId);
          this.router.navigateByUrl(`randomPageUrl/${$event.itemId}`);
      }
      

      • usage of (eventChanged)
        • in .html:

        (eventChanged) = "changeItemDate($event)"
        

        *in .ts:

          changeItem($event: Item): void {
            console.log($event);
            for (const event of this.events) {
              if (event.itemId === $event.itemId) {
                event.startDate = $event.startDate;
              }
            }
          }
        

    • usage of (dayEmitter):

      • in .html:

      (dayEmitter) = "getDate($event)"
      

      • in .ts:

      getDate($event): void {
          console.log($event.getFullYear());
      }
      

    • usage of (dateChange):

      • in .html:

      (dateChange) = "setNewDate($event)"
      

      • in .ts:

      setNewDate($event): void {
          this.date = $event;
      }
      

    • usage of (viewChange):

      • in .html:

        (viewChange) = "writeNewViewToVariable($event)"
        

      • in .ts:

        writeNewViewToVariable($event): void {
            this.view = $event;
        }
        

Input types

[views]:

• string[]
• Choice: 'year','month','week','day'
• default: ['year','month','week','day']

[initialView]:

• string
• Choice: 'year','month','week','day'
• default: 'month'

[initialDate]:

• Date
• default: Date.now()

[language]:

• string
• default: en-Us

[localeValue]:

• Local
• Local-Pattern: Locale
• default: English

[event]:

• Item[]: (id, title, color, list, dateOfExpiry)
• Optional: list, color

[useTitle]:

• Boolean
• Can be used as 'useTitle'

Output Types

(eventEmitter):

• Item

(eventChange):

• Item

(dateEmitter):

• Date

(dateChange):

• Date

(viewChange):

• String

Object Examples

Locale:

export class Locale {
weekdays = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
others = ["Year", "Month", "Week", "Day", "Today", "All Day"];
}

Item:

export class Item {
  itemId = 1;
  list = List;
  * title = "A Title";
  color = "#0e0e0e";
  * startDate = new Date(Date.now());
  endDate = new Date (Date.now());
  allDayItem = false;
}

List:

export class List {
  listId = 1;
  item = Item[];
  title = "A List Title";
  dateOfExpiry = new Date(Date.now());
}

*Recommended Values