{"id":27937,"date":"2022-04-19T08:25:34","date_gmt":"2022-04-19T08:25:34","guid":{"rendered":"http:\/\/make-a-community-events-calendar"},"modified":"2022-04-19T08:25:34","modified_gmt":"2022-04-19T08:25:34","slug":"make-a-community-events-calendar","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/","title":{"rendered":"Make a Community Events Calendar"},"content":{"rendered":"

Raising awareness of things going on in your community is a great way to make people feel more connected and involved in what\u2019s going on around them. A community calendar where people can add events can help with that.<\/p>\n

We\u2019re going to build a calendar that uses Flask on the back-end to interact with a Postgres database and React on the front-end. Users will be able to upload event details, see which days have events, and more.<\/p>\n

Setting up the project<\/h2>\n

We\u2019re going to need a root folder to hold the front-end and back-end of our project, so create a new folder called events-calendar<\/code>. Inside this folder, add a new subfolder called server<\/code>. We\u2019ll make the Flask app in the server<\/code> folder.<\/p>\n

Now let\u2019s set up the local Postgres instance. You can download it here<\/a>. Make sure you take note of your username and password because we\u2019ll need them in the connection string for the back-end. That\u2019s all the base setup we need and now we can start making the Flask app.<\/p>\n

Working in the Flask environment<\/h2>\n

Since the back-end will use a Python framework, you\u2019ll need to create a virtual environment before we start installing packages. To do that, open your terminal, go to the server<\/code> directory, and run the following commands:<\/p>\n

$ python3 -m venv .venv\n$ source .venv\/bin\/activate\n<\/code><\/span><\/pre>\n
Next, we\u2019ll install the Flask<\/a> package and some others with the following command:<\/p>\n
$ pip install flask flask_sqlalchemy flask_cors flask_migrate\n<\/code><\/span><\/pre>\n
With the environment set up and all of the packages installed, we\u2019re ready to create some files for our server.<\/p>\n
Making the Flask API<\/h3>\n
Inside the server<\/code> folder, add a new file called api.py<\/code>. This is the file that will hold the different endpoints our front-end will call. Open this new file and add the following code.<\/p>\n
# api.py<\/span>\nimport json\nfrom flask import Flask, jsonify, request\nfrom flask_sqlalchemy import SQLAlchemy\nfrom flask_migrate import Migrate\nfrom flask_cors import CORS\n\napp = Flask(__name__)\n\nCORS(app)\n\napp.config[\n    \"SQLALCHEMY_DATABASE_URI\"<\/span>\n] = \"postgresql:\/\/username:password@localhost:5432\/calendar\"<\/span>\n\ndb = SQLAlchemy(app)\n\nmigrate = Migrate(app, db)\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This brings in all of the packages we need and it creates the application. We\u2019re applying the CORS package to the app so that we can call the endpoint from a different domain. Then we\u2019re connecting the app to our Postgres database and getting it ready to migrate the schema. Make sure you put in your username and password for that connection string.<\/p>\n
Database schema<\/h3>\n
We can add the schema for the one table we need below our app setup. Below the existing code, add the following.<\/p>\n
# api.py\n\n...\nclass EventsModel(db.Model):\n    __tablename__ = \"events\"\n\n    id = db.Column(db.Integer, primary_key=True)\n    title = db.Column(db.String())\n    date = db.Column(db.Date())\n    time = db.Column(db.Time())\n    location = db.Column(db.String())\n    description = db.Column(db.String())\n\n    def __init__(self, title, date, time, location, description):\n        self.title = title\n        self.date = date\n        self.time = time\n        self.location = location\n        self.description = description\n\n    def __repr__(self):\n        return f\"<Event<\/span> {self.title<\/span>}><\/span>\"\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This describes the table that we want to add to the database. It will be the events<\/code> table and it\u2019ll have six columns to hold details about every event we add. This is all we need to run the database migration. To do that, go to the server<\/code> directory in your terminal and run the following.<\/p>\n
$ flask db init\n<\/code><\/span><\/pre>\n
This will add a migrations<\/code> folder to your project. Next, we need to generate the migration for our model with the following command.<\/p>\n
$ flask db migrate -m \"added events table\"<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Finally, we can run this migration and make these changes in the database with the following command.<\/p>\n
$ flask db upgrade\n<\/code><\/span><\/pre>\n
If you take a look in your Postgres instance, you\u2019ll see the new table and all of the fields we defined in the model. Now we can start creating the endpoints that will work with the data we store in this table.<\/p>\n
Create an event<\/h3>\n
Let\u2019s start with the endpoint that will allow users to create new events on the calendar. Below the events model, add the following code.<\/p>\n
# api.py<\/span>\n\n...\n@app.route(\"\/event\"<\/span>, methods=[\"POST\"<\/span>])\ndef create_event():\n    if<\/span> request.is_json:\n        data = request.get_json()\n\n        new_event = EventsModel(\n            title=data[\"title\"<\/span>],\n            date=data[\"date\"<\/span>],\n            time=data[\"time\"<\/span>],\n            location=data[\"location\"<\/span>],\n            description=data[\"description\"<\/span>],\n        )\n\n        db.session.add(new_event)\n        db.session.commit()\n\n        return<\/span> {\"message\"<\/span>: f\"event {new_event.title} has been created successfully.\"<\/span>}\n    else<\/span>:\n        return<\/span> {\"error\"<\/span>: \"The request payload is not in JSON format\"<\/span>}\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
When a POST<\/code> request is made to the \/event<\/code> endpoint with the correct data, it will add a new record to the events table in the database and send a success message with the event title in the response.<\/p>\n
Get all of the events<\/h3>\n
We\u2019ll need to be able to get all of the events that are in the calendar so that we can render them correctly. To fetch all of the events from the database, add the following code to your api.py<\/code> file below the create event endpoint.<\/p>\n
# api.py<\/span>\n\n...\n@app.route(\"\/events\"<\/span>, methods=[\"GET\"<\/span>])\ndef get_events():\n    eventsData = EventsModel.query.all()\n    events = [\n        {\n            \"id\"<\/span>: event.id,\n            \"title\"<\/span>: event.title,\n            \"date\"<\/span>: event.date,\n            \"time\"<\/span>: event.time,\n            \"location\"<\/span>: event.location,\n            \"description\"<\/span>: event.description,\n        }\n        for<\/span> event in eventsData\n    ]\n\n    return<\/span> {\"events\"<\/span>: json.dumps(events, default<\/span>=str)}\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This creates a new GET<\/code> route called \/events<\/code>. Anytime this endpoint is called with a GET<\/code> request, it will go to the database and retrieve all of the records from the events table and return it as a JSON string.<\/p>\n
Get and update an event<\/h3>\n
We can take advantage of the request type to use the same endpoint to handle different functionality. There will be times we want to look at or edit a particular event. We could use separate endpoints for this, but we\u2019re going to use different request types to distinguish which type of call is being made. Add the following code below the endpoint to get all of the events.<\/p>\n
# api.py<\/span>\n\n...\n@app.route(\"\/event\/<event_id>\"<\/span>, methods=[\"GET\"<\/span>, \"PUT\"<\/span>])\ndef event(event_id):\n    event = EventsModel.query.get_or_404(event_id)\n\n    if<\/span> request.method == \"GET\"<\/span>:\n        response = {\n            \"id\"<\/span>: event.id,\n            \"title\"<\/span>: event.title,\n            \"date\"<\/span>: event.date,\n            \"time\"<\/span>: event.time,\n            \"location\"<\/span>: event.location,\n            \"description\"<\/span>: event.description,\n        }\n\n        return<\/span> {\"message\"<\/span>: \"success\"<\/span>, \"event\"<\/span>: json.dumps(response, default<\/span>=str)}\n    else<\/span>:\n        data = request.get_json()\n\n        event.title = data[\"title\"<\/span>]\n        event.date = data[\"date\"<\/span>]\n        event.time = data[\"time\"<\/span>]\n        event.location = data[\"location\"<\/span>]\n        event.description = data[\"description\"<\/span>]\n\n        db.session.add(event)\n        db.session.commit()\n\n        return<\/span> {\"message\"<\/span>: f\"event {event.title} successfully updated\"<\/span>}\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This checks that the database has a record for the given event ID or it returns an error. If there is a record, the request type is checked and if it is a GET<\/code> request, it will return a JSON string with that event\u2019s details. If it\u2019s a POST<\/code> request, it will update the event record and save the changes to the database.<\/p>\n
Run the file correctly<\/h3>\n
We\u2019re going to run this as the main program so we\u2019ll add this bit of code at the bottom of our file.<\/p>\n
# api.py<\/span>\n\n...\nif<\/span> __name__ == \"__main__\"<\/span>:\n    app.run()\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
You can test this out by running the app with the following command in your terminal.<\/p>\n
$ python api.py\n<\/code><\/span><\/pre>\n
You should see your server start on localhost:5000<\/code> and try sending a request to the \/event<\/code> endpoint to make a new record. This is actually everything we need for the API! We have the database connection and all of the endpoints we need to work with data on the front-end so we can switch our attention there.<\/p>\n
Building the React App<\/h2>\n
Switching over to the front-end, go to the root directory in the terminal and run the following command.<\/p>\n
$ npx create-react-app client --template typescript\n<\/code><\/span><\/pre>\n
This will generate a new React project for you in a new directory called client<\/code>. In your terminal, go to the client<\/code> directory and run the following command to add the packages we\u2019ll use.<\/p>\n
$ npm i axios react-calendar react-modal\n<\/code><\/span><\/pre>\n
With the packages installed, let\u2019s start by making the one component we need for this project.<\/p>\n
Add the event modal<\/h3>\n
In the client<\/code> folder, add a new subfolder called components<\/code>. Inside that folder, add a new file called Event.tsx<\/code>. This will be the modal that appears when users want to view or edit an individual event. Add the following code to that file.<\/p>\n
\/\/ Event.tsx<\/span>\nimport<\/span> axios from<\/span> \"axios\"<\/span>;\nimport<\/span> Modal from<\/span> \"react-modal\"<\/span>;\n\nModal.setAppElement(\"#root\"<\/span>);\n\nexport<\/span> default<\/span> function<\/span> Event<\/span>({\n  showModal,\n  setShowModal,\n  event,\n}: {\n  showModal: boolean;\n  setShowModal: (<\/span>) => void<\/span>;\n  event<\/span>?: any<\/span>;\n}) <\/span>{\n  const<\/span> saveEvent = async<\/span> (event: any) => {\n    event.preventDefault();\n    const<\/span> eventData = {\n      title<\/span>: event.target.title.value,\n      date<\/span>: event.target.date.value,\n      time<\/span>: event.target.time.value,\n      location<\/span>: event.target.location.value,\n      description<\/span>: event.target.description.value,\n    };\n\n    if<\/span> (!event) {\n      await<\/span> axios.post(\"http:\/\/localhost:5000\/event\"<\/span>, eventData);\n    } else<\/span> {\n      await<\/span> axios.put(`http:\/\/localhost:5000\/event\/${event.id}<\/span>`<\/span>, eventData);\n    }\n  };\n\n  return<\/span> (\n    <><\/span>\n      <Modal<\/span>\n        isOpen<\/span>={showModal}<\/span>\n        onRequestClose<\/span>={setShowModal}<\/span>\n        contentLabel<\/span>=\"Event\"<\/span>\n      ><\/span>\n        <div<\/span>><\/span>Event<\/div<\/span>><\/span>\n        <form<\/span> onSubmit<\/span>={saveEvent}<\/span>><\/span>\n          <div<\/span>><\/span>\n            <label<\/span> htmlFor<\/span>=\"title\"<\/span>><\/span>Event title<\/label<\/span>><\/span>\n            <input<\/span>\n              name<\/span>=\"title\"<\/span>\n              type<\/span>=\"text\"<\/span>\n              id<\/span>=\"title\"<\/span>\n              defaultValue<\/span>={event?.title}<\/span>\n            \/><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span>><\/span>\n            <label<\/span> htmlFor<\/span>=\"date\"<\/span>><\/span>Event dateime<\/label<\/span>><\/span>\n            <input<\/span>\n              name<\/span>=\"date\"<\/span>\n              type<\/span>=\"text\"<\/span>\n              id<\/span>=\"date\"<\/span>\n              defaultValue<\/span>={event?.date}<\/span>\n            \/><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span>><\/span>\n            <label<\/span> htmlFor<\/span>=\"time\"<\/span>><\/span>Event time<\/label<\/span>><\/span>\n            <input<\/span>\n              name<\/span>=\"time\"<\/span>\n              type<\/span>=\"text\"<\/span>\n              id<\/span>=\"time\"<\/span>\n              defaultValue<\/span>={event?.time}<\/span>\n            \/><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span>><\/span>\n            <label<\/span> htmlFor<\/span>=\"location\"<\/span>><\/span>Event location<\/label<\/span>><\/span>\n            <input<\/span>\n              name<\/span>=\"location\"<\/span>\n              type<\/span>=\"text\"<\/span>\n              id<\/span>=\"location\"<\/span>\n              defaultValue<\/span>={event?.location}<\/span>\n            \/><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span>><\/span>\n            <label<\/span> htmlFor<\/span>=\"description\"<\/span>><\/span>Event title<\/label<\/span>><\/span>\n            <input<\/span>\n              name<\/span>=\"description\"<\/span>\n              type<\/span>=\"text\"<\/span>\n              id<\/span>=\"description\"<\/span>\n              defaultValue<\/span>={event?.description}<\/span>\n            \/><\/span>\n          <\/div<\/span>><\/span>\n          <button<\/span> onClick<\/span>={setShowModal}<\/span>><\/span>Close modal<\/button<\/span>><\/span>\n          <button<\/span> type<\/span>=\"submit\"<\/span>><\/span>Save event<\/button<\/span>><\/span>\n        <\/form<\/span>><\/span>\n      <\/Modal<\/span>><\/span>\n    <\/><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This imports a few packages and sets up the modal element to target the root element. Then we have the Event<\/code> component which takes a few props. Then there is a saveEvent<\/code> method that will take the values from the form we have and either update or create a new event based on if there is any current event data available.<\/p>\n
Then we have the form that will either be blank or display the event information in the fields depending on if the event<\/code> prop was passed to the modal. We also decide whether the modal should currently be showing or if it should be hidden based on the showModal<\/code> prop.<\/p>\n
That\u2019s all for the modal to show, update, or create new events. Now we need the page that shows the calendar and all of the events we have.<\/p>\n
The calendar page<\/h3>\n
We\u2019re going to modify the existing App.tsx<\/code> file to render our calendar and the events. Here\u2019s what the new code will look like. There\u2019s a lot going on here so we\u2019ll walk through it.<\/p>\n
\/\/ App.tsx<\/span>\n\nimport axios from \"axios\"<\/span>;\nimport { useEffect, useState } from \"react\"<\/span>;\nimport Calendar from \"react-calendar\"<\/span>;\nimport \"react-calendar\/dist\/Calendar.css\"<\/span>;\nimport Event from \".\/components\/Event\"<\/span>;\n\nexport default<\/span> function<\/span> App<\/span>()<\/span> <\/span>{\n  const<\/span> [date, setDate] = useState(new<\/span> Date());\n  const<\/span> [showModal, setShowModal] = useState<boolean>(false<\/span>);\n  const<\/span> [showEditModal, setShowEditModal] = useState<boolean>(false<\/span>);\n  const<\/span> [event, setEvent] = useState({});\n  const<\/span> [events, setEvents] = useState<any>([]);\n\n  useEffect(() => {\n    axios.get(\"http:\/\/localhost:5000\/events\"<\/span>).then((res) => {\n      setEvents(JSON.parse(res.data.events));\n    });\n  }, []);\n\n  function<\/span> tileContent<\/span>({ date, view }: any)<\/span> <\/span>{\n    const<\/span> display = events.map((event: any) => {\n      const<\/span> eventDate = new<\/span> Date(event.date);\n      eventDate.setDate(eventDate.getDate() + 1<\/span>);\n\n      if<\/span> (date.toDateString() === eventDate.toDateString()) {\n        return<\/span> \" \"<\/span> + event.title + \" \"<\/span>;\n      }\n      return<\/span> \"\"<\/span>;\n    });\n    return<\/span> display;\n  }\n\n  return<\/span> (\n    <div>\n      <h1>Event Calendar<\/h1>\n      <Calendar\n        onChange={setDate}\n        value={date}\n        onClickDay={() => setShowModal(true<\/span>)}\n        tileContent={tileContent}\n      \/>\n      <>\n        {events &&\n          events.map((event: any) => (\n            <div\n              key={event.title}\n              onClick={() => {\n                setEvent(event);\n                setShowEditModal(true<\/span>);\n              }}\n              style={{ borderBottom: \"1px solid grey\"<\/span>, padding: \"18px\"<\/span> }}\n            >\n              <div>{event.title}<\/div>\n              <div>\n                {event.date} - {event.time}\n              <\/div>\n              <div>{event.location}<\/div>\n              <div>{event.description}<\/div>\n            <\/div>\n          ))}\n      <\/>\n      {showEditModal && (\n        <Event\n          showModal={showEditModal}\n          setShowModal={() => setShowEditModal(false<\/span>)}\n          event={event}\n        \/>\n      )}\n      {showModal && (\n        <Event showModal={showModal} setShowModal={() => setShowModal(false<\/span>)} \/>\n      )}\n    <\/div>\n  );\n}\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
We start off by importing the packages we need to get the calendar and the events data. Inside the App<\/code> component we have some states that will control how elements are rendered on the page. After that, we have a useEffect<\/code> hook that fetches all of the events from the database when the page is loaded.<\/p>\n
Then there\u2019s a function that adds the title of an event to the date on the calendar. Next, we render the Calendar<\/code> component and pass it a few props. After that, we display a list of all of the events that are currently on the calendar. Finally, we conditionally show the event modal based on current states.<\/p>\n
The last thing we need to edit is the CSS so this looks a little<\/em> better.<\/p>\n
Style the calendar<\/h3>\n
There will be a lot of things you need to change stylistically before this goes to production, but we\u2019ll at least add a few things to get this to an MVP stage. Find the index.scss<\/code> file in client > src<\/code> and add the following code at the bottom.<\/p>\n
\/\/ index.scss<\/span>\n\n... .react-calendar {\n  width<\/span>: 100<\/span>% !important;\n  border: solid 1<\/span>px white;\n  border-radius: 12<\/span>px;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This will at least make the calendar the full width of the page so people can see the event titles. Here\u2019s what the calendar page will look like if you run the front-end and back-end at the same time.<\/p>\n
\"calendar<\/p>\n
Now you have a full-stack application ready to handle all of the events in your community!<\/p>\n
Finished code<\/h2>\n
You can find the code for the finished project in the events-calendar<\/code> folder of this repo<\/a>. You can also check out this Code Sandbox<\/a> for the front-end.<\/p>\n
<CodeSandBox\ntitle=\u201cfrosty-grass-bh34cq\u201d\nid=\u201cfrosty-grass-bh34cq\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
Planning events is hard enough without trying to figure out how to spread the word. This might be a way to encourage people to let others know what is going on and how they can participate. This project should be flexible enough that you can style it and expand the functionality in a number of ways.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27938,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332,134,246,371],"class_list":["post-27937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api","tag-guest-post","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nMake a Community Events Calendar<\/title>\n<meta name=\"description\" content=\"If you've ever been frustrated about missing something going on in your community or city, this might be a way that you solve the problem. We're going to build an events calendar that people can add information to!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make a Community Events Calendar\" \/>\n<meta property=\"og:description\" content=\"If you've ever been frustrated about missing something going on in your community or city, this might be a way that you solve the problem. We're going to build an events calendar that people can add information to!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-19T08:25:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2992\" \/>\n\t<meta property=\"og:image:height\" content=\"2000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Make a Community Events Calendar\",\"datePublished\":\"2022-04-19T08:25:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA\",\"keywords\":[\"API\",\"Guest Post\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/\",\"name\":\"Make a Community Events Calendar\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA\",\"datePublished\":\"2022-04-19T08:25:34+00:00\",\"description\":\"If you've ever been frustrated about missing something going on in your community or city, this might be a way that you solve the problem. We're going to build an events calendar that people can add information to!\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA\",\"width\":2992,\"height\":2000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make a Community Events Calendar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Make a Community Events Calendar","description":"If you've ever been frustrated about missing something going on in your community or city, this might be a way that you solve the problem. We're going to build an events calendar that people can add information to!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/","og_locale":"en_US","og_type":"article","og_title":"Make a Community Events Calendar","og_description":"If you've ever been frustrated about missing something going on in your community or city, this might be a way that you solve the problem. We're going to build an events calendar that people can add information to!","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-19T08:25:34+00:00","og_image":[{"width":2992,"height":2000,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/"},"author":{"name":"","@id":""},"headline":"Make a Community Events Calendar","datePublished":"2022-04-19T08:25:34+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA","keywords":["API","Guest Post","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/","name":"Make a Community Events Calendar","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA","datePublished":"2022-04-19T08:25:34+00:00","description":"If you've ever been frustrated about missing something going on in your community or city, this might be a way that you solve the problem. We're going to build an events calendar that people can add information to!","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA","width":2992,"height":2000},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-a-community-events-calendar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make a Community Events Calendar"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925846\/Web_Assets\/blog\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b\/694bdee9c23c4b67e47229e2acc2728b376db20a-2992x2000-1_27938a700b.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27937"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27937\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27938"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}