Neutral Political Machine

    react-google-cal
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    react-google-calendar-api

    Build Status npm (custom registry) npm (downloads) Gitter chat

    An api to manage your google calendar

    Install

    npm install --save react-google-calendar-api
    

    Use

    import ApiCalendar from 'react-google-calendar-api';
    

    Typescript Import

    import ApiCalendar from 'react-google-calendar-api/src/ApiCalendar';
    

    Create a file apiGoogleconfig.json in the root directory with your googleApi clientId and ApiKey. https://console.developers.google.com/flows/enableapi?apiid=calendar.

    {
      "clientId": "<CLIENT_ID>",
      "apiKey": "<API_KEY>",
      "scope": "https://www.googleapis.com/auth/calendar",
      "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 ApiCalendar from 'react-google-calendar-api';
    
      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') {
              ApiCalendar.handleAuthClick();
            } else if (name === 'sign-out') {
              ApiCalendar.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
        * @param {string} sendUpdates Acceptable values are: "all", "externalOnly", "none"
        * @returns {any} Promise on the event.
        */
       public createEvent(event: object, calendarId: string = this.calendar, sendUpdates: string = 'none',): 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.
         * @param {string} timeZone The time zone in which the time is specified. (Formatted as an IANA Time Zone Database name, e.g. "Europe/Zurich".)
         * @returns {any} Promise on the event.
         */
        public createEventFromNow({time, summary, description = ''}: any, calendarId: string = this.calendar, timeZone: string = "Europe/Paris"): any

    Example

    import ApiCalendar from 'react-google-calendar-api';
    
    const eventFromNow: object = {
      summary: 'Poc Dev From Now',
      time: 480,
    };
    
    ApiCalendar.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 ApiCalendar from 'react-google-calendar-api';
    
    if (ApiCalendar.sign)
      ApiCalendar.listUpcomingEvents(10).then(({ result }: any) => {
        console.log(result.items);
      });

    List All Events:

        /**
         * List all events in the calendar queried by custom query options
         * See all available options here https://developers.google.com/calendar/v3/reference/events/list
         * @param {object} queryOptions to see
         * @param {string} calendarId to see by default use the calendar attribute
         * @returns {any}
         */
        public listEvents(queryOptions, calendarId = this.calendar): any

    Example

    import ApiCalendar from 'react-google-calendar-api';
    if (ApiCalendar.sign)
      ApiCalendar.listEvents({
          timeMin: new Date()..toISOString(),
          timeMax: new Date().addDays(10).toISOString(),
          showDeleted: true,
          maxResults: 10,
          orderBy: 'updated'
      }).then(({ result }: any) => {
        console.log(result.items);
      });

    Update Event

       /**
        * Update Calendar event
        * @param {string} calendarId for the event.
        * @param {string} eventId of the event.
        * @param {object} event with details to update, e.g. summary
        * @param {string} sendUpdates Acceptable values are: "all", "externalOnly", "none"
        * @returns {any} Promise object with result
        */
       public updateEvent(event: object, eventId: string, calendarId: string = this.calendar, sendUpdates: string = 'none'): any

    Example

    import ApiCalendar from 'react-google-calendar-api';
    
    const event = {
      summary: 'New Event Title',
    };
    
    ApiCalendar.updateEvent(event, '2eo85lmjkkd2i63uo3lhi8a2cq').then(console.log);

    Delete Event

       /**
       * Delete an event in the calendar.
       * @param {string} eventId of the event to delete.
       * @param {string} calendarId where the event is.
       * @returns {any} Promise resolved when the event is deleted.
       */
       public deleteEvent(eventId: string, calendarId: string = this.calendar): any

    Example

    import ApiCalendar from 'react-google-calendar-api';
    
    ApiCalendar.deleteEvent('2eo85lmjkkd2i63uo3lhi8a2cq').then(console.log);

    Get Event

       /**
       * Get Calendar event
       * @param {string} calendarId for the event.
       * @param {string} eventId specifies individual event
       * @returns {any}
       */
       public getEvent(eventId: string, calendarId: string = this.calendar): any

    Example

    import ApiCalendar from 'react-google-calendar-api';
    
    ApiCalendar.getEvent('2eo85lmjkkd2i63uo3lhi8a2cq').then(console.log);

    Get BasicUserProfile Event

       /**
       * @returns {any} Get the user's basic profile information.
       * Documentation: https://developers.google.com/identity/sign-in/web/reference#googleusergetbasicprofile
       */
       public getBasicUserProfile(): any

    Examples

    import ApiCalendar from 'react-google-calendar-api';
    
    ApiCalendar.getBasicUserProfile('2eo85lmjkkd2i63uo3lhi8a2cq')
      .getEmail()
      .then(console.log);
    
    ApiCalendar.getBasicUserProfile('2eo85lmjkkd2i63uo3lhi8a2cq')
      .getName()
      .then(console.log);

    or with async/wait

    import ApiCalendar from 'react-google-calendar-api';
    
    const response = await ApiCalendar.getBasicUserProfile();
    
    response.getEmail();

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

    Install

    npm i react-google-cal

    DownloadsWeekly Downloads

    9

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    32.7 kB

    Total Files

    16

    Last publish

    Collaborators

    • jackall3n