# Externally controlling vue-cal

**URL:** <https://community.weweb.io/t/externally-controlling-vue-cal/10650>\
**Category:** Developer corner\
**Created:** [September 4, 2024, 11:24pm UTC](https://community.weweb.io/t/externally-controlling-vue-cal/10650 "2024-09-04T23:24:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gduteaud](https://avatars.discourse-cdn.com/v4/letter/g/f19dbf/32.png) [@gduteaud](https://community.weweb.io/u/gduteaud)\
**Post date:** [September 4, 2024, 11:24pm UTC](https://community.weweb.io/t/externally-controlling-vue-cal/10650/1 "2024-09-04T23:24:33Z")

</div>

Hi all,

I’m using a custom calendar component based on the WeWeb vue-cal implementation.

I would like to be able to control the calendar view using external components like buttons. This is covered in the vue-cal documentation here: [Vue Cal](https://antoniandre.github.io/vue-cal/#ex--external-controls)

However I have no idea how to go about making that work within WeWeb.

Can anyone point me in a helpful direction?

Thank you!  
GD

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 5, 2024, 6:26am UTC](https://community.weweb.io/t/externally-controlling-vue-cal/10650/2 "2024-09-05T06:26:01Z")

</div>

Fork it and expose the calendar actions is probably the only way.

---

<div class="post-metadata">

**Author:** ![plucky00](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/plucky00/32/4726_2.png) [@plucky00](https://community.weweb.io/u/plucky00)\
**Post date:** [September 5, 2024, 12:59pm UTC](https://community.weweb.io/t/externally-controlling-vue-cal/10650/3 "2024-09-05T12:59:23Z")

</div>

You can override almost all the configuration using the HTML attributes section, use the Vue Cal reference documentation, you can, for example, change with an external button the Active View just adding an HTML attribute (see item 5):

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6cf38a08d0af45b05e8c59ad65e82762bbfa0ba0.png)

---

<div class="post-metadata">

**Author:** ![gduteaud](https://avatars.discourse-cdn.com/v4/letter/g/f19dbf/32.png) [@gduteaud](https://community.weweb.io/u/gduteaud)\
**Post date:** [September 5, 2024, 1:22pm UTC](https://community.weweb.io/t/externally-controlling-vue-cal/10650/4 "2024-09-05T13:22:19Z")

</div>

Thank you, that’s exactly what I was looking for!

Works perfectly for activeView, but what about triggering methods like previous() and next()?