enessfk / ionic-calendar-app

:calendar: IonCalendar - A basic calendar application that can schedule and display events with month, week, and day views built with the Ionic Framework.

IonCalendar

📆 A basic calendar application built with Ionic v5.

Report Bug · Request Feature

About

IonCalendar is a basic calendar application made using Ionic and Angular. In addition to the features to schedule and display events, it has the feature to switch between three different views: month, week and day.

Built with

• Ionic v5 - Ionic Framework is the open-source mobile app development framework that makes it easy to build top quality native and progressive web apps with web technologies.
• Angular v11 - Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.
• TypeScript - TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.

     

How does it work?

This project uses one of the best calendar components for Ionic called ionic2-calendar. It is up to date for all Ionic versions. Take a look into link to know more about it.

Getting Started

The following instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

To run this project in production or development mode you have to make sure, ionic and cordova are installed globally on your computer.

Before proceeding, also check if Node.js (bundled with npm) is installed. It is recommended to select the LTS version to ensure best compatibility.

• To check if it is installed:

node --version
npm --version

• Install ionic and cordova command line interface globally:

npm install -g ionic cordova

Installation

To get this project, clone the repository directly using git or download a zip copy from the master branch on Github.

git clone https://github.com/enessfk/ionic-calendar-app.git IonCalendar

To install the dependencies, run this in the application folder from the command-line:

npm install

Running the app in your browser:

ionic serve

Running the app on your device:

Add an iOS or Android platform to the project:

ionic cordova platform add ios 
# or 
ionic cordova platform add android

Run the app on your device:

ionic cordova run ios
# or
ionic cordova run android

For further information please read ionic's deployment guide.

Screenshots

   

   

Contributing

Want to contribute? Great! To fix a bug or enhance an existing module, follow these steps:

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/enhanced-feature)
3. Commit your Changes (git commit -m 'Add some enhanced-feature')
4. Push to the Branch (git push origin feature/enhanced-feature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

ionic-calendar-app's Issues

how to slect serveral day per month

hello n
could you help to select several days in a month in a calendar, i don't succeed in doing that.
my code is :

listeValidation Accueil

{{username}} {{ madate| date:'fullDate':'':'fr' }}

selectionner

```

and my typescript code is :
import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import {CalendarComponent} from "ion2-calendar";

@ViewChild(CalendarComponent)
@component({
selector: 'app-liste-validation',
templateUrl: './liste-validation.page.html',
styleUrls: ['./liste-validation.page.scss'],
})
export class ListeValidationPage implements OnInit {
username: string;
password: string;
date: Date;
type: 'string';
value: any;
private parameters: any;
private madate: Date ;

constructor(private route: ActivatedRoute, private router: Router,private screenOrientation: ScreenOrientation) {
}

ngOnInit() {
registerLocaleData(localeFr);
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
if(localStorage.getItem('token')!=null && localStorage.getItem('username')!=null){
this.parameters=JSON.parse(this.route.snapshot.params.param);
this.username=this.parameters.username;
//this.date=this.parameters.date ;
console.log('le mot de passe vaut '+this.parameters.password);
}
else{
this.router.navigate(['login']);
}
}
onChange($event) {
// Vérifiez si $event est un tableau
if (Array.isArray($event)) {
this.parameters = $event.map(date => {
return {
date: new Date(date.getFullYear(),date.getMonth(),date.getDate()),
username: this.username,
};
});

  // Ajoutez cette vérification pour voir si le tableau est vide
  if (this.parameters.length > 0) {
    this.madate = this.parameters[0].date;
  } else {
    this.madate = null; // ou toute autre valeur par défaut appropriée
  }
} else {
  // Si $event n'est pas un tableau, traitez-le comme une seule date
  this.parameters = {
    date: new Date($event.getFullYear(),$event.getMonth(),$event.getDate()),
    username: this.username,
  };
  this.madate = this.parameters.date;
}
console.log(this.parameters);

}

selectionner(key: string, value: string){
console.log(this.parameters);
const param=JSON.stringify(this.parameters);
if (localStorage.getItem('token') != null) {
this.router.navigate(['/presence/', {param}]);
}
}
markDisabled = (date: Date) => {
const current = new Date();
return date < current;
};

// openCalendar() {
// const options = {
// canBackwardsSelected: true,
// defaultDateRange: this.date,
// pickMode: 'range'
// };
// let myCalendar = this.modalCtrl.create(CalendarModal, {
// options: options
// });
//
// myCalendar.present();
//
// myCalendar.onDidDismiss((date, type) => {
// if (date) {
// this.date = date;
// }
// });
// }
// eslint-disable-next-line @typescript-eslint/member-ordering
calendar = {
dateFormatter: {
formatMonthViewDay(date: Date) {
return date.getDate();
},
formatMonthViewDayHeader(date: Date) {
return 'formatmonthView';
},
formatMonthViewTitle(date: Date) {
return 'formatMonth';
},
formatWeekViewDayHeader(date: Date) {
return 'formatWeek';
},
formatWeekViewTitle(date: Date) {
return 'testWT';
},
formatWeekViewHourColumn(date: Date) {
return 'HourWeek';
},
formatDayViewHourColumn(date: Date) {
return 'HourDay';
},
formatDayViewTitle(date: Date) {
return 'FormatDay';
}
},
mode: 'month',
currentDate: new Date(),
locale: 'fr-FR'
};
optionsMultiSelect = {
pickMode: 'multi'
};

ngOnDestroy() {
this.screenOrientation.unlock();
}
}

how to do this  ?
Cordially