Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@ericz1803/react-google-calendar
Advanced tools
A react component that displays an event calendar using data from google's calendar api. It is intended to replace the embedded google calendar.
See it in action here.
Design inspired by this calendar.
npm install --save @ericz1803/google-react-calendar
First, get an api key from here by following step 1.
Alternately, you can go to https://console.developers.google.com/flows/enableapi?apiid=calendar.
Then, get the calendar id from the google calendar. It will look somehting like s9ajkhr604dfrmvm7185lesou0@group.calendar.google.com
.
You can find it by going to a calendar's settings and scrolling down to the section that is labelled Integrate calendar
.
Parameter | Type | Description | Default |
---|---|---|---|
apiKey | string | google api key (required) | |
calendarId | string | google calendar id (required) | |
useCalendarTimezone | bool | Make all of the times in the same timezone as the calendar (true = times are in calendar timezone, false = times are in user's timezone) | false |
You can change the color of different aspects of the calendar by passing css colors (eg. #51565d
or rgba(166, 168, 179, 0.12)
) into the following props (as a string).
Parameter | Type | Description | Default |
---|---|---|---|
borderColor | string | color of calendar lines | "LightGray" |
textColor | string | color of the calendar text | "#51565d" |
backgroundColor | string | color of the calendar | null |
todayTextColor | string | text color of today | null (same as textColor ) |
todayBackgroundColor | string | color of today | null (same as backgroundColor ) |
Parameter | Type | Description | Default |
---|---|---|---|
eventBorderColor | string | border color of tooltip that pops up when you click on an event | "rgba(81, 86, 93, 0.1)" |
eventHoverColor | string | color of the event on hover | "rgba(81, 86, 93, 0.1)" |
eventTextColor | string | text color of event | "#51565d" |
eventCircleColor | string | color of the circle in front of the event text | "#4786ff" |
import Calendar from "@ericz1803/react-google-calendar";
const API_KEY = "YOUR_API_KEY";
const CALENDAR_ID = "YOUR_CALENDAR_ID";
class Example extends React.Component {
render() {
let props = {
useCalendarTimezone: true,
eventCircleColor: 'SpringGreen',
borderColor: 'SlateGrey',
}
return (
<div>
<Calendar apiKey={API_KEY} calendarId={CALENDAR_ID} {...props} />
</div>
)
}
}
MIT License
FAQs
React Google Calendar Component
The npm package @ericz1803/react-google-calendar receives a total of 182 weekly downloads. As such, @ericz1803/react-google-calendar popularity was classified as not popular.
We found that @ericz1803/react-google-calendar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.