CYJS panels can now be magnified with a simple attribute data-magnify=”true” 😉

Just add it to a ClassPanel div and the magnify icon will be automatically set. A click on it will make the panel full screen – with a higher z-index – , a second click will replace it to its original place.

Check the demo, page CYJS Calendar : the Agenda can be magnified.

HTML :

<div class="ClassCell ClassBorder" style="width: 70%;  margin: 5px">
    <div id="agenda" class="ClassPanel" data-magnify="true">
        <span>Agenda</span>
    </div>
    <div class="ClassCalendar" id="calendaragenda" data-default-view="agendaWeek">
    </div>
</div>

JS :

CYPanel("#agenda",
{
    move: false,
    resize: true,
    magnify: true
    icon: "cog"
});

That new attribute data-magnify is not set by default.