# Use Ocsigen toolkit widgets

**URL:** <https://discuss.ocaml.org/t/use-ocsigen-toolkit-widgets/222>\
**Category:** Ecosystem\
**Tags:** gui, ocsigen\
**Created:** [May 18, 2017, 8:32pm UTC](https://discuss.ocaml.org/t/use-ocsigen-toolkit-widgets/222 "2017-05-18T20:32:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cedlemo](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/cedlemo/32/1213_2.png) [@cedlemo](https://discuss.ocaml.org/u/cedlemo)\
**Post date:** [May 18, 2017, 8:32pm UTC](https://discuss.ocaml.org/t/use-ocsigen-toolkit-widgets/222/1 "2017-05-18T20:32:04Z")

</div>

I wanted to try the Ocsigen toolkit widgets so I generated a little test with :

```
eliom-distillery -name test -template basic.ppx -target-directory test

```

Then I added this `ocsigen-toolkit.client` in the Makefile.options at the line :

```
CLIENT_PACKAGES := lwt.ppx js_of_ocaml.ppx js_of_ocaml.deriving.ppx ocsigen-toolkit.client

```

And here is my test.eliom file :

```ocaml
[%%shared
    open Eliom_lib
    open Eliom_content
    open Html.D
    open Lwt
]

module Test_app =
  Eliom_registration.App (
    struct
      let application_name = "test"
      let global_data_path = None
    end)

let cal = Ot_calendar.make ()

let page () =
  html
    (head (title (pcdata "Test")) [])
    (body [h1 [pcdata "Test"];
           cal ])

let main_service =
  Test_app.create
    ~path:(Eliom_service.Path [])
    ~meth:(Eliom_service.Get Eliom_parameter.unit)
    (fun () () ->
       Lwt.return (page ())
    )

```

And of course, it don’t work. I have the following message : `Error: Unbound module Ot_calendar`

---

<div class="post-metadata">

**Author:** ![Armael](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/armael/32/1223_2.png) [@Armael](https://discuss.ocaml.org/u/Armael)\
**Post date:** [May 18, 2017, 8:53pm UTC](https://discuss.ocaml.org/t/use-ocsigen-toolkit-widgets/222/2 "2017-05-18T20:53:56Z")

</div>

Adding `ocsigen-toolkit.server` to `SERVER_PACKAGES` should make it work :).  
(note also that, at least here, the calendar creation function is `Ot_calendar.make`, not `Ot_calendar.create`)

---

<div class="post-metadata">

**Author:** ![cedlemo](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/cedlemo/32/1213_2.png) [@cedlemo](https://discuss.ocaml.org/u/cedlemo)\
**Post date:** [May 18, 2017, 9:05pm UTC](https://discuss.ocaml.org/t/use-ocsigen-toolkit-widgets/222/3 "2017-05-18T21:05:49Z")

</div>

> Adding ocsigen-toolkit.server to SERVER\_PACKAGES should make it work :).

You are right, it works with this.

> the calendar creation function is Ot\_calendar.make

And for this too you are right 🙂 . My calendar is not shown but I will try to find out myself and maybe create another question.

thanks

---

<div class="post-metadata">

**Author:** ![Armael](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/armael/32/1223_2.png) [@Armael](https://discuss.ocaml.org/u/Armael)\
**Post date:** [May 18, 2017, 9:47pm UTC](https://discuss.ocaml.org/t/use-ocsigen-toolkit-widgets/222/4 "2017-05-18T21:47:19Z")

</div>

Ah, this is probably because here you create the calendar widget once at the toplevel, while it should be created when creating the page contents. In other words, removing the `let cal = ...` and defining `page` as:

```auto
let page () =
  html
    (head (title (pcdata "Test")) [])
    (body [h1 [pcdata "Test"];
           Ot_calendar.make () ])

```

seems to work… 🙂