2

I am displaying a calendar using Jquery plugin fullCalendar. I am also giving permission to the users to edit this calendar. I have a hard time to get the salesforce id. I could display it but i need to access this for edit purpose.
I am trying to capture the id in originalEventid, i couldn't please let me how to do that

My code goes like this:

VF Page:

<script type="text/javascript">
          var originalEventid;
          function displaymessage(){
            var editurl ="https://";
            domain = window.location.hostname;
            editurl +=domain ;
//          window.open(editurl);
            alert(originalEventid);
            }
        $(document).ready(function() {   
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: false,

                events:
                [
                  <apex:repeat value="{!GpCal}" var="gc" id="theRepeat">
                        {
                            title: "{!gc.title}",
                            start: "{!gc.StartDate}",
                            Subject: "{!gc.Subject}",
                            url: "{!gc.url}",
                            Notes: "{!gc.Notes}", 
                            gpid:"{!gc.gpid}",
                            className: '{!gc.className}'
                        },
                    </apex:repeat>
                ]
eventRender: function (GroupCalendar, element) {                     
                   element.attr('href', 'javascript:void(0);');
                   element.click(function() {       
                    $("#eventInfo").html(GroupCalendar.Subject);
                    $("#eventInfo1").html(GroupCalendar.Notes);
                    $("#eventInfo2").html(GroupCalendar.gpid);
                    originalEventid = $(this).data('eventInfo2');---->**( i am trying to assign the id to a variable here)**
                    if (GroupCalendar.url){
                        $("#eventLink").attr('href',GroupCalendar.url); 
                        $("#eventLink").show();
                    } 
                    else {
                          $("#eventLink").hide();
                    }         
                    $("#eventContent").dialog({ modal: true, title:GroupCalendar.title, width:350});
                    }); 
                }
            });           
        });
    </script>

</head> 
    <apex:sectionHeader title="Calendar"/>
    <apex:outputPanel id="calPanel">
        <apex:form >
            <div id="cal-options">
              <apex:commandButton onclick="window.open('{!DestURL}');" value="Add an Event" rendered="{!showButton}"/>
            </div>
            <div id="cal-legend">
            <ul>
              <li><span class="event-birthday"></span>Contact's Birthdays</li>
              <li><span class="event-campaign"></span>Campaigns</li>
            </ul>
            <div style="clear:both;"><!--fix floats--></div>
            </div>
            <div style="clear:both;"><!--fix floats--></div>
            <div id="calendar"></div>
</div>
            <div id="eventContent" title="Event Details" style="display:none;">
                <p id="eventInfo"></p>
                <p id="eventInfo1"></p>
                <p id="eventInfo2"></p>             
                <apex:commandButton id="btnDemo" onclick="displaymessage()" value="Edit" rendered="{!showButton}"/>
                <p><strong><a id="eventLink" target="_blank">Read More</a></strong></p>
            </div>
        </apex:form>
    </apex:outputPanel>
</apex:page>
2
  • try this link codebycody.com/2013/06/…
    – MIX DML
    Oct 9, 2015 at 17:35
  • i already did, eventclick takes to the new window/tab of the event to edit, but what i am looking is to add edit button in the eventRender, on clicking the edit button i want to navigate to the edit page.
    – user8132
    Oct 11, 2015 at 14:45

1 Answer 1

2

Here is the snippet of code for someone who is doing something similar.

 <script type="text/javascript"> 
        var sfurlId;
            function displaymessage(gpurl){
            var editurl ="https://";
            domain = window.location.hostname;
            editurl +=domain+'/'+gpurl+'/e' ;
            window.open(editurl);
             }
....
 $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
eventRender: function (calEvent, element) {  

                   element.attr('href', 'javascript:void(0);');
                   element.click(function() {       
                    $("#eventInfo").html(calEvent.Subject);
                    $("#eventInfo1").html(calEvent.Notes);
                    $("#eventInfo2").html(calEvent.gpid);

                    if (GroupCalendar.url){
                        $("#eventLink").attr('href',calEvent.url); 
                        $("#eventLink").show();
                    } 
                    else {
                          $("#eventLink").hide();
                    }   
                    if (calEvent.gpid) {
                        sfurlId = calEvent.gpid;
                    }
                    $("#eventContent").dialog({ modal: true, title:calEvent.title, width:350});
                    }); 
         if (calEvent.gpid) {
                        sfurlId = calEvent.gpid;
                    }
$("#eventContent").dialog({ modal: true, title:calEvent.title, width:350});
                    }); 

<apex:form id="theForm">
  <div id="calendar">
            </div>
            <div id="eventContent" title="Event Details" style="display:none;">
                <p id="eventInfo"></p>
                <p id="eventInfo1"></p>
                <p id="eventInfo2"></p>
                <apex:commandButton id="btnDemo" onclick="displaymessage(sfurlId)" value="Edit" rendered="{!showButton}"/>
                <p><strong><a id="eventLink" target="_blank">Read More</a></strong></p>
            </div>
</form>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .