search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to show a resource Bubble using Javascript

Asked by Thomas OD
11 years ago.

Hi,

I wonder how open a resource bubble on ResourceHeaderClick event?
Drawing inspiration from the following code:
http://kb.daypilot.org/29719/how-to-show-a-calendar-event-bubble-using-javascript/

I tried this :
dpsPlanning.ResourceHeaderClickHandling = ResourceHeaderClickHandlingType.JavaScript
dpsPlanning.ResourceHeaderClickJavaScript = "bubble.showEvent(resource);"

but it doesn't work, even if I get no error.
Is there a way to do this?
Have I missed something?

Thanks in advance for all your suggestions.

Thomas

how-to asp.net avacript
Answer posted by Dan Letecky [DayPilot]
11 years ago.

Thomas, you can use the following code: 

// bubble = DayPilot.Bubble object
// dps = use ClientObjectName value (DayPilot.Scheduler object)
// resource = resource id
function showResourceBubble(bubble, dps, resource) {
  var res = {};
  res.calendar = dps; 
  res.id = resource; 
  res.toJSON = function() {
    var json = {};
    json.id = this.id;
    return json;
  };
  bubble.showResource(res);
}

Just note that this is internal API and it may change in the future.

Comment posted by Dan Letecky [DayPilot]
11 years ago.

Just to make it clear: bubble and dps should be passed to showResourceBubble() as objects (not as strings), while resource should be passed as string.

A complete example to illustrate the usage (it's a modified Demo/Scheduler/Default.aspx source): 

<%@ Page Language="C#" MasterPageFile="~/Demo.master" AutoEventWireup="true" CodeFile="Default.aspx.cs"
    Inherits="Scheduler_Default" Title="AJAX Scheduler | DayPilot Pro for ASP.NET WebForms Demo"  Culture="en-us" %>

<%@ Register Assembly="DayPilot" Namespace="DayPilot.Web.Ui" TagPrefix="DayPilot" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">

/* Fast filter helpers */

function clear() {
    var filterBox = document.getElementById("TextBoxFilter");
    filterBox.value = '';
    filter();
}
function filter() {
    var filterBox = document.getElementById("TextBoxFilter");
    var filterText = filterBox.value;
    
    dps1.clientState = {"filter": filterText};
    dps1.commandCallBack("filter");
}

function key(e) {
    var keynum  = (window.event) ? event.keyCode : e.keyCode;

    if (keynum === 13) {
        filter();
        return false;
    }

    return true;     
}

/* Event editing helpers - modal dialog */
    function dialog() {
	    var modal = new DayPilot.Modal();
	    modal.top = 60;
        modal.width = 300;
        modal.opacity = 70;
        modal.border = "10px solid #d0d0d0";
        modal.closed = function() { 
            if(this.result == "OK") { 
                dps1.commandCallBack('refresh'); 
            }
            dps1.clearSelection();
        };
	
        modal.height = 250;
        modal.zIndex = 100;
        return modal;
    }

	function timeRangeSelected(start, end, resource) {
	    var modal = dialog();
	    modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource + "&hash=<%= PageHash %>");
	}
	
	function eventClick(e) {
	    var modal = dialog();
	    modal.showUrl("Edit.aspx?id=" + e.value() + "&hash=<%= PageHash %>");
	}

</script>

	<div class="note"><b>Note:</b> You can create a theme using the online <strong>DayPilot Theme Designer</strong>: <a href="http://themes.daypilot.org/">http://themes.daypilot.org/</a></div>
	
    <DayPilot:DayPilotScheduler 
        ID="DayPilotScheduler1" 
        runat="server" 
        DataStartField="start" 
        DataEndField="end" 
        DataTextField="name" 
        DataValueField="id" 
        DataResourceField="column" 
        DataTagFields="id, name"
        HeaderFontSize="8pt" 
        HeaderHeight="20" 
        EventHeight="30"
        EventFontSize="11px" 
        Width="100%" 
        RowHeaderWidth="120"
        CellDuration="1440" 
        CellGroupBy="Month" 
        CellWidth="60"
        TimeRangeSelectedHandling="JavaScript"
        TimeRangeSelectedJavaScript="timeRangeSelected(start, end, resource)"
        ClientObjectName="dps1" 
        EventMoveHandling="CallBack" 
        OnEventMove="DayPilotScheduler1_EventMove" 
        EventMoveJavaScript="dps1.eventMoveCallBack(e, newStart, newEnd, newResource);"
        EventResizeHandling="Notify"
        OnEventResize="DayPilotScheduler1_EventResize"
        OnTimeRangeSelected="DayPilotScheduler1_TimeRangeSelected" 
        EventClickHandling="JavaScript"
        EventClickJavaScript="eventClick(e);"
        EventEditHandling="CallBack" 
        OnEventEdit="DayPilotScheduler1_EventEdit" 
        OnBeforeEventRender="DayPilotScheduler1_BeforeEventRender"
        OnEventMenuClick="DayPilotScheduler1_EventMenuClick" 
        xContextMenuID="DayPilotMenu2" 
        ContextMenuResourceID="DayPilotMenuRes"
        BusinessBeginsHour="5" 
        BusinessEndsHour="24"
        AfterRenderJavaScript="afterRender(data, isCallBack);" 
        OnBeforeResHeaderRender="DayPilotScheduler1_BeforeResHeaderRender"
        UseEventBoxes="Always" 
        EnableViewState="false" 
        ScrollLabelsVisible="false" 
        BubbleID="DayPilotBubble1" 
        ShowToolTip="false"
        HeightSpec="Max" 
        Height="500" 
        OnCommand="DayPilotScheduler1_Command" 
        OnEventClick="DayPilotScheduler1_EventClick"
        OnTimeRangeMenuClick="DayPilotScheduler1_TimeRangeMenuClick" 
        OnBeforeCellRender="DayPilotScheduler1_BeforeCellRender"
        TreeEnabled="true"
        TreeIndent="15"
        EventDoubleClickHandling="Edit"
        BorderColor="#666666"
        xResourceBubbleID="DayPilotBubble1"
        
        CssClassPrefix="scheduler_green"
        CssOnly="true"
        HourNameBackColor="#F0F0F0" 
        OnResourceHeaderMenuClick="DayPilotScheduler1_ResourceHeaderMenuClick"
        ResourceHeaderClickHandling="JavaScript" 
        OnResourceHeaderClick="DayPilotScheduler1_ResourceHeaderClick" 
        OnBeforeTimeHeaderRender="DayPilotScheduler1_BeforeTimeHeaderRender"
        ContextMenuSelectionID="DayPilotMenuSelection"
        DynamicEventRendering="Disabled"
        
        SyncResourceTree="true" 
        DragOutAllowed="true"
        MoveBy="Top"
        TimeRangeDoubleClickHandling="JavaScript"
        TimeRangeDoubleClickJavaScript="alert('double click');"
        DurationBarVisible="false"
        TimeHeaderClickHandling="CallBack"
        OnTimeHeaderClick="DayPilotScheduler1_TimeHeaderClick"
        >
        <Resources>
            <DayPilot:Resource Name="Room A" Value="A" Expanded="False">
                <Children>
                    <DayPilot:Resource Name="Room A.1" Value="A.1" Expanded="False" >
                        <Children>
                            <DayPilot:Resource Name="Room A.1.1" Value="A.1.1" Expanded="False" />
                            <DayPilot:Resource Name="Room A.1.2" Value="A.1.2" Expanded="False" />
                        </Children>
                    </DayPilot:Resource>
                    <DayPilot:Resource Name="Room A.2" Value="A.2" Expanded="False" />
                </Children>
            </DayPilot:Resource>
            <DayPilot:Resource Name="Room B" Value="B" Expanded="False" />
            <DayPilot:Resource Name="Room C" Value="C" ToolTip="Test" Expanded="False" />
            <DayPilot:Resource Name="Room D" Value="D" Expanded="False" />
            <DayPilot:Resource Name="Room E" Value="E" Expanded="False" />
            <DayPilot:Resource Name="Room F" Value="F" Expanded="False" />
            <DayPilot:Resource Name="Room G" Value="G" Expanded="False" />
            <DayPilot:Resource Name="Room H" Value="H" Expanded="False" />
            <DayPilot:Resource Name="Room I" Value="I" Expanded="False" />
            <DayPilot:Resource Name="Room J" Value="J" Expanded="False" />
            <DayPilot:Resource Name="Room K" Value="K" Expanded="False" />
            <DayPilot:Resource Name="Room L" Value="L" Expanded="False" />
            <DayPilot:Resource Name="Room M" Value="M" Expanded="False" />
            <DayPilot:Resource Name="Room N" Value="N" Expanded="False" />
            <DayPilot:Resource Name="Room O" Value="O" Expanded="False" />
            <DayPilot:Resource Name="Room P" Value="P" Expanded="False" />
            <DayPilot:Resource Name="Room Q" Value="Q" Expanded="False" />
            <DayPilot:Resource Name="Room R" Value="R" Expanded="False" />
            <DayPilot:Resource Name="Room S" Value="S" Expanded="False" />
            <DayPilot:Resource Name="Room T" Value="T" Expanded="False" />
            <DayPilot:Resource Name="Room U" Value="U" Expanded="False" />
            <DayPilot:Resource Name="Room V" Value="V" Expanded="False" />
            <DayPilot:Resource Name="Room W" Value="W" Expanded="False" />
            <DayPilot:Resource Name="Room X" Value="X" Expanded="False" />
            <DayPilot:Resource Name="Room Y" Value="Y" Expanded="False" />
            <DayPilot:Resource Name="Room Z" Value="Z" Expanded="False" />
       </Resources>
    </DayPilot:DayPilotScheduler>
    
    <DayPilot:DayPilotMenu ID="DayPilotMenu2" runat="server" CssClassPrefix="menu_full_" UseShadow="false">
        <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="alert('Opening event (id ' + e.value() + ')');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Send" Action="JavaScript" JavaScript="alert('Sending event (id ' + e.value() + ')');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Refresh" Action="JavaScript" JavaScript="dps1.commandCallBack('refresh');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="-" Action="NavigateUrl"></DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Delete (CallBack)" Action="Callback" Command="Delete"></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="PostBack" Command="Delete" Text="Delete (PostBack)" />
        <DayPilot:MenuItem Action="JavaScript" JavaScript="alert('x:' + dps1.eventOffset.x + ' y:' + dps1.eventOffset.y + ' resource:' + e.row());" Text="Mouse offset (relative to event)" />
        <DayPilot:MenuItem Action="NavigateUrl" NavigateUrl="javascript:alert('Going somewhere else (id {0})');"
            Text="NavigateUrl test" />
    </DayPilot:DayPilotMenu>
    
    <DayPilot:DayPilotMenu ID="DayPilotMenuSpecial" runat="server" ClientObjectName="cmSpecial" CssClassPrefix="menu_full_" UseShadow="false"
        >
        <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="alert('Opening event (id ' + e.value() + ')');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Send" Action="JavaScript" JavaScript="alert('Sending event (id ' + e.value() + ')');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Delete (JavaScript using callback)" Action="JavaScript"
            Command='Delete' JavaScript="if (confirm('Do you really want to delete event ' + e.text() + ' ?')) dps1.eventMenuClickCallBack(e, command);">
        </DayPilot:MenuItem>
    </DayPilot:DayPilotMenu>
    
    <DayPilot:DayPilotMenu ID="DayPilotMenuSelection" runat="server" CssClassPrefix="menu_" >
        <DayPilot:MenuItem Action="JavaScript" JavaScript="dps1.timeRangeSelectedCallBack(e.start, e.end, e.resource);"
            Text="Create new event (JavaScript)" />
        <DayPilot:MenuItem Action="PostBack" Command="Insert" Text="Create new event (PostBack)" />
        <DayPilot:MenuItem Action="CallBack" Command="Insert" Text="Create new event (CallBack)" />
        <DayPilot:MenuItem Text="-" Action="JavaScript"></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="JavaScript" JavaScript="alert('Start: ' + e.start + '\nEnd: ' + e.end + '\nResource id: ' + e.resource);"
            Text="Show selection details" />
        <DayPilot:MenuItem Action="JavaScript" JavaScript="dps1.clearSelection();" Text="Clean selection" />
    </DayPilot:DayPilotMenu>

    <DayPilot:DayPilotMenu ID="DayPilotMenuRes" runat="server"  CssClassPrefix="menu_">
        <DayPilot:MenuItem Action="CallBack" Command="Insert" Text="Add child" />
        <DayPilot:MenuItem Text="-" Action="JavaScript"></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="CallBack" Command="Delete" Text="Delete" />
        <DayPilot:MenuItem Action="CallBack" Command="DeleteChildren" Text="Delete children" />
        <DayPilot:MenuItem Text="-" Action="JavaScript"></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="JavaScript" JavaScript="alert(e.name + '\n' + e.value);"
            Text="Show resource details" />
    </DayPilot:DayPilotMenu>

    
    <DayPilot:DayPilotBubble 
        ID="DayPilotBubble1" 
        runat="server" 
        OnRenderContent="DayPilotBubble1_RenderContent" 
        ClientObjectName="bubble" 
        OnRenderEventBubble="DayPilotBubble1_RenderEventBubble"
        Width="250"
        
        Corners="Rounded"
        Position="EventTop"
        CssOnly="true"
        CssClassPrefix="bubble_default"
        >
    </DayPilot:DayPilotBubble>

    <br />
    <a href="javascript:showResourceBubble(bubble, dps1, 'a');">Show bubble</a>
    <br />
    
    <script type="text/javascript">


// bubble = DayPilot.Bubble object
// dps = use ClientObjectName value (DayPilot.Scheduler object)
// resource = resource id
function showResourceBubble(bubble, dps, resource) {
  var res = {};
  res.calendar = dps; 
  res.id = resource; 
  res.toJSON = function() {
    var json = {};
    json.id = this.id;
    return json;
  };
  bubble.showResource(res);
}

/* DayPilotScheduler.AfterRenderJavaScript handler */

function afterRender(data, isCallBack) {
}

</script>
</asp:Content>
This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.
Tools
E-mail notifications
Feed
Related Questions
Diferent design for resource bubble and event bubble
Resource Bubble no longer working
How to use angular component in bubble HTML
Using div in bubble
How to use bubblehtml on angular5
Resource-Bubble for java scheduler
Event Bubble
Scheduler - How to show bubble for active area
Event Bubble Can not config
area bubble
Urgent: Scheduler resource view, call JavaScript when hovering over resource header.
Incorrect position of bubble on event mouse hover in scheduler
how do you show a custom resource tag on the resourcebubble event
Event Bubble
Daypilot + sharepoint 2007

Products

Learn

Get Support

DayPilot Pro

Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.