Skip to main content

Planner Week

Follow this step-by-step guide to build and customize your application using Planby Now:

info

Download the example channels CSV file from -> Link.

Download the example elements CSV file from -> Link.

Step 1: Create an Application​

  1. Go to the Home Page.

  2. Click Create an App and provide a name for your application.

    Img

Step 2: Upload Data in the Channels Tab​

  1. Navigate to the Channels tab.

  2. Upload your data using the provided uploader.

    • You can download example data from this link.

    Img

    Img

Step 3: Upload Data in the Elements Tab​

  1. Go to the Elements tab.
  2. Upload your data similarly to how you did in the Channels tab from this link.

Img

Img

Step 4: Configure Dates in the Builder Tab​

  1. Open the Builder tab.
  2. Enter your Start Date and End Date in the appropriate fields to initialize your application.

Img

Img

Enter Start Date: 2024-11-01 00:00 and End Date: 2025-01-31 00:00

Img

Img

Element 1​

Start Time: 2024-11-04T00:00:00
End Time: 2024-11-08T00:00:00
Color: #38A169
Show Background: true

Element 2​

Start Time: 2024-11-11T00:00:00
End Time: 2024-11-14T00:00:00
Color: #D69E2E
Show Background: false

Element 3​

Start Time: 2024-11-17T00:00:00
End Time: Color: #C53030
Show Background: false

Element 4​

Start Time: 2025-01-04T00:00:00
End Time: 2025-01-08T00:00:00
Color: #38A169
Show Background: true

Element 5​

Start Time: 2025-01-11T00:00:00
End Time: 2025-01-14T00:00:00
Color: #D69E2E
Show Background: false

Element 6​

Start Time: 2025-01-17T00:00:00
End Time:
Color: #C53030
Show Background: false

Element 7​

Start Time: 2025-01-20T00:00:00
End Time: 2025-01-25T00:00:00
Color: #007a8a
Show Background: true

Element 8​

Start Time: 2025-01-28T00:00:00
End Time:
Color: #008048
Show Background: false

Img Img Img

Step 5: Adjust Dimensions in the Dimensions Tab​

  1. Navigate to the Dimensions tab.
  2. Change the sidebar width to 200px.

Img

Step 6: Modify UI Elements in the UI Elements Tab​

  1. Go to the UI Elements tab.
  2. Click the "Show text in channel" tile and disable the "Show image in channel" option.

Img

Step 7: Customize Elements in the Elements Tab​

  1. Return to the Elements tab.
  2. Enable "Show image in element" for all variants.

Img

  1. Adjust image properties:

    • Set the image height to 40px and width to 40px.
    • Change the border radius to 50 for a rounded appearance.
    • Select the Gradient option for the image style.

Img

Step 8: Enable and Configure Modal in the Modal Tab​

  1. Go to the Modal tab.
  2. Enable the modal by clicking the "Enable Modal" option.
  3. Enable the "Show images section" for all modal variants.

Img

Img

That’s It! 🚀​

Your application is now fully customized and ready to use. Explore more advanced features and fine-tune your settings to make it truly yours!