abcalendar v1.3.1

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