Nurturing Palpable Magnificence

    google-calendar-react

    1.0.0 • Public • Published

    google-calendar-react

    Integration of Google Calendar API on your Custom Client side OR React component

    Install

    Using NPM

    npm install --save google-calendar-react
    

    Using Yarn

    yarn add google-calendar-react
    

    Use

    import GoogleAPICalendar from 'google-calendar-react';
    

    Typescript Import

    import GoogleAPICalendar from 'google-calendar-react/GoogleAPICalendar';
    

    Go to the https://console.developers.google.com/flows/enableapi?apiid=calendar. find your ApiKey and clientId And

    Create a file googleApiConfig.json in the root directory with your googleApi clientId and ApiKey.

    {
      "clientId": "<YOUR_GOOGLE_CLIENT_ID>",
      "apiKey": "<YOUR_GOOGLE_API_KEY>",
      "scope": "https://www.googleapis.com/auth/calendar", // Pass your Required Read Write Scopes as per needs.
      "discoveryDocs": [
        "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"
      ]
    }

    Setup

    handleAuthClick:

        /**
         * Sign in with a Google account.
         */
        public handleAuthClick(): void

    handleSignOutClick:

        /**
         * Sign out user google account
         */
        public handleSignoutClick(): void

    Example

      import React, {ReactNode, SyntheticEvent} from 'react';
      import GoogleAPICalendar from 'google-calendar-react';
     
      export default class DoubleButton extends React.Component {
          constructor(props) {
            super(props);
            this.handleItemClick = this.handleItemClick.bind(this);
          }
     
          public handleItemClick(event: SyntheticEvent<any>, name: string): void {
            if (name === 'sign-in') {
              GoogleAPICalendar.handleAuthClick();
            } else if (name === 'sign-out') {
              GoogleAPICalendar.handleSignoutClick();
            }
          }
     
          render(): ReactNode {
            return (
                  <button
                      onClick={(e) => this.handleItemClick(e, 'sign-in')}
                  >
                    sign-in
                  </button>
                  <button
                      onClick={(e) => this.handleItemClick(e, 'sign-out')}
                  >
                    sign-out
                  </button>
              );
          }
      }

    setCalendar:

        /**
         * Set the default attribute calendar
         * @param {string} newCalendar ID.
         */
        public setCalendar(newCalendar: string): void

    Manage Event

    You need to be registered with handleAuthClick.

    Create Event:

        /**
        * Create calendar event
        * @param {string} CalendarId for the event by default use 'primary'.
        * @param {object} Event with start and end dateTime
        * @returns {any} Promise on the event.
        */
       public createEvent(event: object, calendarId: string = this.calendar): any {

    Create Event From Now:

         /**
         * Create an event from the current time for a certain period.
         * @param {number} Time in minutes for the event
         * @param {string} Summary(Title) of the event
         * @param {string} Description of the event (optional)
         * @param {string} CalendarId by default calendar set by setCalendar.
         * @returns {any} Promise on the event.
         */
        public createEventFromNow({time, summary, description = ''}: any, calendarId: string = this.calendar): any

    Example

    import GoogleAPICalendar from "google-calendar-react";
     
    const eventFromNow: object = {
      summary: "Poc Dev From Now",
      time: 480
    };
     
    GoogleAPICalendar.createEventFromNow(eventFromNow)
      .then((result: object) => {
        console.log(result);
      })
      .catch((error: any) => {
        console.log(error);
      });

    List All Upcoming Events:

        /**
         * List all events in the calendar
         * @param {number} maxResults to see
         * @param {string} calendarId to see by default use the calendar attribute
         * @returns {any} Promise with the result.
         */
        public listUpcomingEvents(maxResults: number, calendarId: string = this.calendar): any

    Example

    import GoogleAPICalendar from "google-calendar-react";
     
    if (GoogleAPICalendar.sign)
      GoogleAPICalendar.listUpcomingEvents(10).then(({ result }: any) => {
        console.log(result.items);
      });

    Utils

    listenSign:

         /**
         * Execute the callback function when a user is disconnected or connected with the sign status.
         * @param callback
         */
        public listenSign(callback: any): void

    onLoad:

        /**
         * Execute the callback function when gapi is loaded (gapi needs to be loaded to use any other methods)
         * @param callback
         */
        public onLoad(callback: any): void

    Example

        import React, {ReactNode} from 'react';
        import GoogleAPICalendar from 'google-calendar-react';
     
        export default class StatusSign extends React.Component<any, any> {
            constructor(props) {
                super(props);
                this.state = {
                  sign: GoogleAPICalendar.sign,
                };
                this.signUpdate = this.signUpdate.bind(this);
                GoogleAPICalendar.onLoad(() => {
                    GoogleAPICalendar.listenSign(this.signUpdate);
                });
            }
     
            public signUpdate(sign: boolean): any {
                this.setState({
                    sign
                })
            }
     
            render(): ReactNode {
                return (
                    <div>{this.state.sign}</div>
                );
            }
        }

    Install

    npm i google-calendar-react

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    28.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • developer-amit