Skip to content

Commit 73b1c4d

Browse files
pinkeshmarsPoojaB26
pinkeshmars
and
PoojaB26
authored
Built in components (#77)
* Added chart section * added line chart * Added bar chart * Added pie chart widget * Added progress bar widget * Added calendar widget * Added carousel widget * Added swipeable stack widget * added datatable (paginated) widget * Added creditcard form * Added countcontroller widget * Added choicechips widget * Moved GIFs to arcade * Added internal links * Remove sidebar_position from components so they are alphabetically placed. * Add tags back to components getting-started.md --------- Co-authored-by: PoojaB26 <[email protected]>
1 parent 4d066ad commit 73b1c4d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+3623
-12
lines changed

‎docs/resources/ui-building-blocks/components/built-in-components/calendar.md

Lines changed: 396 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,396 @@
1+
---
2+
slug: calendar
3+
title: Calendar
4+
tags: []
5+
description: Learn how to add Calendar widget in your FlutterFlow project.
6+
---
7+
8+
# Calendar
9+
The Calendar widget shows days in a month and a week. You can use the Calendar widget to filter the event list by date. For example, showing appointments on a specific date.
10+
11+
12+
## Adding Calendar to your project
13+
14+
To add the Calendar widget to your project:
15+
16+
1. Drag the **Calendar** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
17+
2. On running the app, the calendar widget shows today's date by default. To set a different date, follow the instructions as below.
18+
3. Move to the Properties Panel and scroll down to the **Calendar** section.
19+
4. Find the **Initial Date** property, click **Unset,** and set the date from the variable (app state, API, etc.).
20+
21+
<div style={{
22+
position: 'relative',
23+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
24+
height: 0,
25+
width: '100%'}}>
26+
<iframe
27+
src="https://demo.arcade.software/1GJn5refWUefIpiVeOJH?embed&show_copy_link=true"
28+
title=""
29+
style={{
30+
position: 'absolute',
31+
top: 0,
32+
left: 0,
33+
width: '100%',
34+
height: '100%',
35+
colorScheme: 'light'
36+
}}
37+
frameborder="0"
38+
loading="lazy"
39+
webkitAllowFullScreen
40+
mozAllowFullScreen
41+
allowFullScreen
42+
allow="clipboard-write">
43+
</iframe>
44+
</div>
45+
<p></p>
46+
47+
## Show/save the selected date
48+
49+
When you select/change any date on the calendar, you can display it on the page or save it in a variable/Field (as Timestamp datatype) for later access.
50+
51+
Let's build an example of showing the selected date in a Text widget that looks like the one below:
52+
53+
<div style={{
54+
position: 'relative',
55+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
56+
height: 0,
57+
width: '100%'}}>
58+
<iframe
59+
src="https://demo.arcade.software/flTBTqgrm4qEVJKVX9CK?embed&show_copy_link=true"
60+
title=""
61+
style={{
62+
position: 'absolute',
63+
top: 0,
64+
left: 0,
65+
width: '100%',
66+
height: '100%',
67+
colorScheme: 'light'
68+
}}
69+
frameborder="0"
70+
loading="lazy"
71+
webkitAllowFullScreen
72+
mozAllowFullScreen
73+
allowFullScreen
74+
allow="clipboard-write">
75+
</iframe>
76+
</div>
77+
<p></p>
78+
79+
The steps to show the selected date in the Text widget are as follows:
80+
81+
### 1. Create an app state variable
82+
83+
Changing the date on the calendar widget emits the selected date in a variable called *calendarSelectedDay*. You can't use this value directly in the Text widget because the Text widget can only accept String values. Hence it would help if you created an app state variable that will store the *calendarSelectedDay* value and then display the selected date in a Text widget (using Date Format Options).
84+
85+
To create the app state variable, please find the instructions [here](../../../../resources/data-representation/app-state#create-app-state-variable).
86+
87+
It should look something like this:
88+
89+
![app-state-variable-calendar.avif](imgs/app-state-variable-calendar.avif)
90+
91+
### 2. Saving selected date in app state variable
92+
93+
To save the selected date in an app state variable, you can utilize the ***On Date Selected*** event and then add actions to update the app state variable:
94+
95+
Here are the steps in detail:
96+
97+
1. Select the **Calendar** widget from the widget tree or canvas area.
98+
2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action flow Editor** in a new popup window.
99+
1. Click on the **+ Add Action**.
100+
2. On the right side, search and select the [**Update App State**](../../../../resources/data-representation/app-state#update-app-state-variable) action.
101+
3. Set the **Select field to update** to the App State variable **name**.
102+
4. Choose the **Select Update Type** to **Set Value**.
103+
5. Set the **Value Source** to **From Variable**.
104+
6. Set the **Source** to **Widget State**.
105+
7. Set the **Available Options** to the **calendarSelectedDay**.
106+
8. If there is a multiple date selection (date range selection), you can choose which date to pick up. You can choose to set the start or end date by setting the **Range Part** to **Start** or **End**. For a single date selection (which is by default), the start and end date would be the same.
107+
108+
109+
<div style={{
110+
position: 'relative',
111+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
112+
height: 0,
113+
width: '100%'}}>
114+
<iframe
115+
src="https://demo.arcade.software/dryKpzgT3k6ddEeKimgO?embed&show_copy_link=true"
116+
title=""
117+
style={{
118+
position: 'absolute',
119+
top: 0,
120+
left: 0,
121+
width: '100%',
122+
height: '100%',
123+
colorScheme: 'light'
124+
}}
125+
frameborder="0"
126+
loading="lazy"
127+
webkitAllowFullScreen
128+
mozAllowFullScreen
129+
allowFullScreen
130+
allow="clipboard-write">
131+
</iframe>
132+
</div>
133+
<p></p>
134+
135+
### 3. Showing date in Text widget from an app state variable
136+
137+
To show the selected date in the Text widget:
138+
139+
1. Select the **Text**, move to the properties panel, and click **Set from Variable**.
140+
2. Select **Source** as **App State** and **Available Options** to the App State Variable **name**.
141+
3. (Optional) Set the **Timestamp Format** to display the date in a specific format.
142+
4. (Optional) Set the default value if you wish to.
143+
5. Click **Confirm**.
144+
145+
146+
<div style={{
147+
position: 'relative',
148+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
149+
height: 0,
150+
width: '100%'}}>
151+
<iframe
152+
src="https://demo.arcade.software/9TfBlx75kKNdo5B9tZXO?embed&show_copy_link=true"
153+
title=""
154+
style={{
155+
position: 'absolute',
156+
top: 0,
157+
left: 0,
158+
width: '100%',
159+
height: '100%',
160+
colorScheme: 'light'
161+
}}
162+
frameborder="0"
163+
loading="lazy"
164+
webkitAllowFullScreen
165+
mozAllowFullScreen
166+
allowFullScreen
167+
allow="clipboard-write">
168+
</iframe>
169+
</div>
170+
<p></p>
171+
172+
## Using a calendar to filter the list
173+
174+
You might need to use the calendar widget to filter the list of events (appointments, meetings, tickets, etc.). You can do so by applying the filter on the backend query and passing the selected date as a parameter.
175+
176+
Let's build an example that shows the Todos list (from the Firestore collection) based on date. Here's how it looks:
177+
178+
<div style={{
179+
position: 'relative',
180+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
181+
height: 0,
182+
width: '100%'}}>
183+
<iframe
184+
src="https://demo.arcade.software/GLkPvB0KKYKZ6zz071KL?embed&show_copy_link=true"
185+
title=""
186+
style={{
187+
position: 'absolute',
188+
top: 0,
189+
left: 0,
190+
width: '100%',
191+
height: '100%',
192+
colorScheme: 'light'
193+
}}
194+
frameborder="0"
195+
loading="lazy"
196+
webkitAllowFullScreen
197+
mozAllowFullScreen
198+
allowFullScreen
199+
allow="clipboard-write">
200+
</iframe>
201+
</div>
202+
<p></p>
203+
204+
The steps to use the calendar to filter the list are as follows:
205+
206+
### 1. Prepare data
207+
208+
Before you use the calendar to filter the list, you need to have a list of items with at least one field that holds the date. This date will be used to match against the date selected from the calendar. Skip if you already have data in such a format.
209+
210+
211+
You can create a Firestore collection with a date field like the one below:
212+
213+
![calendar-prepare-data.avif](imgs/calendar-prepare-data.avif)
214+
215+
### 2. Building UI
216+
217+
Your UI must include at least two calendars and ListView widgets. Here's how you add it:
218+
219+
1. Add the **Calendar** widget. To provide a better user experience, you can switch to the week view.
220+
2. Add the **ListView** and show the data from the Firestore collection.
221+
222+
223+
<div style={{
224+
position: 'relative',
225+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
226+
height: 0,
227+
width: '100%'}}>
228+
<iframe
229+
src="https://demo.arcade.software/4eApAqcwXihUXwegmens?embed&show_copy_link=true"
230+
title=""
231+
style={{
232+
position: 'absolute',
233+
top: 0,
234+
left: 0,
235+
width: '100%',
236+
height: '100%',
237+
colorScheme: 'light'
238+
}}
239+
frameborder="0"
240+
loading="lazy"
241+
webkitAllowFullScreen
242+
mozAllowFullScreen
243+
allowFullScreen
244+
allow="clipboard-write">
245+
</iframe>
246+
</div>
247+
<p></p>
248+
249+
### 3. Apply date filter on backend query
250+
251+
Finally, you can add a filter on the existing backend query or a new one and provide the selected date from the calendar.
252+
253+
To apply filter by date:
254+
255+
1. Select **ListView** from the widget tree or the canvas area.
256+
2. Click on the **Backend Query** tab (on the right side of your screen).
257+
3. Query a collection. Skip if you have already done so.
258+
4. Scroll down and click on the **+ Filter** button at the bottom
259+
5. Find the **Field Name**, click on the Unset, and select the field on which you would like to apply the filter.
260+
6. Find the **Relation** dropdown, click on the **Unset** and choose the relation as **Equal To**.
261+
7. Set the **Value Source** to **From Variable**.
262+
8. Set the **Source** to **Widget State**.
263+
9. Set the **Available Options** to the **calendarSelectedDay**.
264+
10. If there is a multiple date selection (date range selection), you can choose which date to pick up. You can choose to include the start or end date by setting the **Range Part** to **Start** or **End**. For a single date selection (by default), the start and end date would be the same.
265+
11. Click **Confirm**.
266+
12. After this, you can display the actual data in UI elements.
267+
268+
<div style={{
269+
position: 'relative',
270+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
271+
height: 0,
272+
width: '100%'}}>
273+
<iframe
274+
src="https://demo.arcade.software/w3dU6VaYsv6DTvkzXj8m?embed&show_copy_link=true"
275+
title=""
276+
style={{
277+
position: 'absolute',
278+
top: 0,
279+
left: 0,
280+
width: '100%',
281+
height: '100%',
282+
colorScheme: 'light'
283+
}}
284+
frameborder="0"
285+
loading="lazy"
286+
webkitAllowFullScreen
287+
mozAllowFullScreen
288+
allowFullScreen
289+
allow="clipboard-write">
290+
</iframe>
291+
</div>
292+
<p></p>
293+
294+
## Customizing calendar
295+
296+
The Properties Panel can be used to customize the appearance and behavior of your widget.
297+
298+
### Changing icon color
299+
300+
You can change the color of the icons displayed on the top right side of the calendar. to do that:
301+
302+
1. Select **Calendar** from the widget tree or the canvas area.
303+
2. Move to the Properties panel and scroll down to the **Calendar** section.
304+
3. Find the **Icon Colors** property, click on the box next to **Unset**, select the color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
305+
306+
<div style={{
307+
position: 'relative',
308+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
309+
height: 0,
310+
width: '100%'}}>
311+
<iframe
312+
src="https://demo.arcade.software/fB2aHoT3Qv9FrlXP4wGV?embed&show_copy_link=true"
313+
title=""
314+
style={{
315+
position: 'absolute',
316+
top: 0,
317+
left: 0,
318+
width: '100%',
319+
height: '100%',
320+
colorScheme: 'light'
321+
}}
322+
frameborder="0"
323+
loading="lazy"
324+
webkitAllowFullScreen
325+
mozAllowFullScreen
326+
allowFullScreen
327+
allow="clipboard-write">
328+
</iframe>
329+
</div>
330+
<p></p>
331+
332+
### Separate title and icons
333+
334+
By default, the calendar title (displaying the current month-year) and the icon for changing the month are positioned on the same row. If you wish to place them in separate rows, navigate to the **Properties Panel > Calendar >** and **enable the Two-row Header** option.
335+
336+
<div style={{
337+
position: 'relative',
338+
paddingBottom: 'calc(35.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
339+
height: 0,
340+
width: '100%'}}>
341+
<iframe
342+
src="https://demo.arcade.software/C6QmsfHDwktnhPyFkuYi?embed&show_copy_link=true"
343+
title=""
344+
style={{
345+
position: 'absolute',
346+
top: 0,
347+
left: 0,
348+
width: '100%',
349+
height: '100%',
350+
colorScheme: 'light'
351+
}}
352+
frameborder="0"
353+
loading="lazy"
354+
webkitAllowFullScreen
355+
mozAllowFullScreen
356+
allowFullScreen
357+
allow="clipboard-write">
358+
</iframe>
359+
</div>
360+
<p></p>
361+
362+
### Changing row height
363+
364+
Changing the row height allows you to adjust the calendar height as per your design.
365+
366+
To change the row height:
367+
368+
1. Select **Calendar** from the widget tree or the canvas area.
369+
2. Move to the Properties panel and scroll down to the **Calendar** section.
370+
3. Find the **Row Height** property and enter the value.
371+
372+
<div style={{
373+
position: 'relative',
374+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
375+
height: 0,
376+
width: '100%'}}>
377+
<iframe
378+
src="https://demo.arcade.software/srhb02TuijJ6YI555RV0?embed&show_copy_link=true"
379+
title=""
380+
style={{
381+
position: 'absolute',
382+
top: 0,
383+
left: 0,
384+
width: '100%',
385+
height: '100%',
386+
colorScheme: 'light'
387+
}}
388+
frameborder="0"
389+
loading="lazy"
390+
webkitAllowFullScreen
391+
mozAllowFullScreen
392+
allowFullScreen
393+
allow="clipboard-write">
394+
</iframe>
395+
</div>
396+
<p></p>

0 commit comments

Comments
 (0)