new files

added calendar and icon2 to include for icon

widget-reference/Icon.md

@@ -9,7 +9,7 @@ The Icon Widget enables easy integration of icons from popular libraries like Fo
 | Property | Type   | Description                                                                                                                                                                                                                                                                                                                                                             |
 | :------- | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | icon     | string | Icon name from Material Icons or Font Awesome                                                                                                                                                                                                                                                                                                                           |
-| library  | string | Which icon library to use, if there is no value for library then its considered to be default. `fontAwesome` `remix` ( for now only few remix icons are supported but we will support most them soon) You can check list of supported icons [here](https://github.com/EnsembleUI/ensemble/blob/476af9ea9862620205a4e85a3312e5433764f785/lib/framework/widget/icon.dart) |
+| library  | [string](/widget-reference/icon2.md) | Which icon library to use, if there is no value for library then its considered to be default. `fontAwesome` `remix` ( for now only few remix icons are supported but we will support most them soon) You can check list of supported icons [here](/widget-reference/icon2.md) |
 | onTap    | action | Call Ensemble's built-in functions or execute code                                                                                                                                                                                                                                                                                                                      |
 | onTapHaptic | enum | The type of haptic to perform when icon is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 | styles   | object | [See properties](#styles)                                                                                                                                                                                                                                                                                                                                               |

widget-reference/calendar.md

@@ -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.