-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added calendar and icon2 to include for icon
- Loading branch information
1 parent
89170cf
commit 0ed49ff
Showing
3 changed files
with
2,625 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
# Creating and Interacting with Calendar | ||
|
||
### [Kitchen Sink Example](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4aAgiwyVyucOAilPNy0s) | ||
|
||
| Attribute | Description | | ||
|--------------------|-----------------------------------------------------------------------------------------------| | ||
| rowHeight | Sets the height of each row in the calendar to a specified value (120 in this case). | | ||
| tooltip | Displays a tooltip with information about the focused date, providing guidance on interaction.| | ||
| headerTextStyle | Defines the text style for the calendar header, controlling its font size. | | ||
| firstDay | Sets the first day of the calendar based on the current date. | | ||
| range | Manages the selection of date ranges, allowing actions to be performed when a range is completed.| | ||
| cell | Configures the style and alignment of individual calendar cells. | | ||
| selectCell | Specifies the appearance of the selected cell in the calendar. | | ||
| markCell | Determines the style of marked cells in the calendar. | | ||
| todayCell | Customizes the appearance of cells representing the current date. | | ||
| disableCell | Defines the style of disabled cells in the calendar, typically with a line-through decoration.| | ||
| rowSpans | Configures the display of events spanning across multiple days, providing a clickable button. | | ||
|
||
|
||
#### Exploring the [Kitchen Sink example](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4aAgiwyVyucOAilPNy0s), let's delve into the process that repeats as users interact with the app, triggering events and updating the UI based on the defined logic and configurations. | ||
|
||
Upon the View's loading, we initiate the following code block: | ||
```yaml | ||
executeCode: | ||
body: |- | ||
ensemble.storage.events = generateEvents(); | ||
``` | ||
This loads in all hardcoded objects within the `generateEvents()` function, as outlined in the `Global: |-` block. | ||
|
||
A notable quirk is encountered when dealing with bindings – setting storage to something (even itself) triggers them. The Calendar example illustrates this perfectly: | ||
```yaml | ||
executeCode: | ||
body: |- | ||
var newEvent = {'start_date': calendar.rangeStart, 'end_date': calendar.rangeEnd, 'title': nameInput.value, 'detail': descInput.value}; | ||
ensemble.storage.events.push(newEvent); | ||
ensemble.storage.events = ensemble.storage.events; | ||
console.log(ensemble.storage.events); | ||
onComplete: | ||
navigateBack: | ||
``` | ||
Here, we start by appending/pushing our new event into our `ensemble.storage.events` array. However, to activate the binding for the updated array, we set it equal to itself, completing the cycle. |
Oops, something went wrong.