Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) How to customize the new appointment? (Read 20537 times)
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
How to customize the new appointment?
Feb 17th, 2014 at 8:39pm
Print Post  
Hi guys,

I am new to mindfusion and I am right now working on a scheduler following the sample code.

I chose the resource view of calendar so once I click the calendar blank time an 'new appointment' small page will pop up with like 'subjects, location, start time, end time, reminder , details and contacts' option.

But actually what I need are only 'subjects,  start time, end time, details', that's all.....and I would like to set the subjects line as a dropdownlist, not a box, so users will have to select subject name from the dropdownlist rather than type it.

Any one could tell me how to do it?

Big thx!!!

Attached is a pic of the new appointment
  

q.JPG (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to customize the new appointment?
Reply #1 - Feb 18th, 2014 at 7:46am
Print Post  
Hi,

In order to replace the existing controls on the form you can override the form's drawContent method. The following snippet shows how you can achieve that:

Code (Javascript)
Select All
<script type="text/javascript">
// Create some dummy subject texts
// This format is expected by the built-in drop-down control -
// an array of objects which contain two fields - 'value' and 'text'.
var populateSubjectItems = function() {
    return [{ value: 'Text one', text: 'Text one' },
               { value: 'Text two', text: 'Text two' },
               { value: 'Text three', text: 'Text three'}];
    }

// Cache the original drawContent function
var drawContentOriginal = MindFusion.Scheduling.EditForm.prototype.drawContent;

// EditForm.drawContent override
MindFusion.Scheduling.EditForm.prototype.drawContent = function() {
    // Draw the form's content
    drawContentOriginal.apply(this, arguments);

    // Create a drop-down control
    var subjectNew = this.createDropDownList({
        id: 'subject',
        items: populateSubjectItems(),
        initValue: this.item.subject,
        addEmptyValue: false
    });
    subjectNew.element.style.width = "355px"

    // Replace the existing input with the newly created select element
    var subjectOriginal = this.getControls()['subject'];
    subjectOriginal.element.parentNode.appendChild(subjectNew.element);
    subjectOriginal.element.remove();

    // Replace also the control in the forms controls collection
    this.getControls()['subject'] = subjectNew;

    // Hide the location row
    this._content.find('div')[1].style.display = 'none';
    // Hide the reminder row
    this._content.find('div.reminder-row')[0].style.display = 'none';
    this._content.find('div.hr-line')[1].style.display = 'none';
    // Hide the contacts list
    this._content.find('table')[1].rows[0].cells[1].style.display = 'none';
    // Adjust the details area size
    this.getControls()['details'].element.style.width = "430px";
};
</script>
 



You can also check out the "Client Events" and "Stock Forms" samples distributed with the control. They show some additional techniques for creating new and modifying existing forms in the control. The samples are available also here, under the Scheduling tab.

In the attached image you can see what the above snippet produces as output.

Regards,
Lyubo
  

customform.png (Attachment deleted)
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: How to customize the new appointment?
Reply #2 - Feb 18th, 2014 at 3:37pm
Print Post  
Hi Lyubo,

Thank you so much!!!

I inserted your code into my javascript piece but once I create new appoint then click 'option', there pop up an error...

Attachment 1 is the screenshot, how to fix it?

Attachment 2 is the screenshot if I delete the line 'subjectOriginal.element.remove();', then the new appointment layout is messed up...

Btw if I would like to set the subject dropdownlist value from database(exp in your code the names and values of "text one, text two, two three" are from databse, so pass database value into 'function()'??)

Appreciate

  

q2.JPG (Attachment deleted)
q3.JPG (Attachment deleted)
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: How to customize the new appointment?
Reply #3 - Feb 18th, 2014 at 4:07pm
Print Post  
One more question, where can I change the schedule color?

I mean once I create a schedule bar in resource view, it looks like a bar from the start date to the end date.

Right now the default color seems like dark blue.

Thank you!

Lyubo wrote on Feb 18th, 2014 at 7:46am:
Hi,

In order to replace the existing controls on the form you can override the form's drawContent method. The following snippet shows how you can achieve that:

Code (Javascript)
Select All
<script type="text/javascript">
// Create some dummy subject texts
// This format is expected by the built-in drop-down control -
// an array of objects which contain two fields - 'value' and 'text'.
var populateSubjectItems = function() {
    return [{ value: 'Text one', text: 'Text one' },
               { value: 'Text two', text: 'Text two' },
               { value: 'Text three', text: 'Text three'}];
    }

// Cache the original drawContent function
var drawContentOriginal = MindFusion.Scheduling.EditForm.prototype.drawContent;

// EditForm.drawContent override
MindFusion.Scheduling.EditForm.prototype.drawContent = function() {
    // Draw the form's content
    drawContentOriginal.apply(this, arguments);

    // Create a drop-down control
    var subjectNew = this.createDropDownList({
        id: 'subject',
        items: populateSubjectItems(),
        initValue: this.item.subject,
        addEmptyValue: false
    });
    subjectNew.element.style.width = "355px"

    // Replace the existing input with the newly created select element
    var subjectOriginal = this.getControls()['subject'];
    subjectOriginal.element.parentNode.appendChild(subjectNew.element);
    subjectOriginal.element.remove();

    // Replace also the control in the forms controls collection
    this.getControls()['subject'] = subjectNew;

    // Hide the location row
    this._content.find('div')[1].style.display = 'none';
    // Hide the reminder row
    this._content.find('div.reminder-row')[0].style.display = 'none';
    this._content.find('div.hr-line')[1].style.display = 'none';
    // Hide the contacts list
    this._content.find('table')[1].rows[0].cells[1].style.display = 'none';
    // Adjust the details area size
    this.getControls()['details'].element.style.width = "430px";
};
</script>
 



You can also check out the "Client Events" and "Stock Forms" samples distributed with the control. They show some additional techniques for creating new and modifying existing forms in the control. The samples are available also here, under the Scheduling tab.

In the attached image you can see what the above snippet produces as output.

Regards,
Lyubo

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to customize the new appointment?
Reply #4 - Feb 18th, 2014 at 5:40pm
Print Post  
Hi,

The element.remove function in Lyubo's code might be an extension added by some library. The DOM equivalent should be this:

subjectOriginal.element.parentNode.removeChild(subjectOriginal.element);

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to customize the new appointment?
Reply #5 - Feb 18th, 2014 at 5:54pm
Print Post  
Quote:
One more question, where can I change the schedule color?


You can find some examples here:
http://www.mindfusion.eu/onlinehelp/webplanner/index.htm?CC_Customizing_the_Appe...

http://www.mindfusion.eu/onlinehelp/webplanner/index.htm?Tutorial_5__Styling.htm

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: How to customize the new appointment?
Reply #6 - Feb 18th, 2014 at 6:55pm
Print Post  
Yes! It works now!

Big thanks!!

Stoyo wrote on Feb 18th, 2014 at 5:40pm:
Hi,

The element.remove function in Lyubo's code might be an extension added by some library. The DOM equivalent should be this:

subjectOriginal.element.parentNode.removeChild(subjectOriginal.element);

I hope that helps,
Stoyan

  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: How to customize the new appointment?
Reply #7 - Feb 18th, 2014 at 7:32pm
Print Post  
How about changing the 'subject' into other name?

In the 'new appointment', first row is 'subject', I tried to rename it but failed....

Stoyo wrote on Feb 18th, 2014 at 5:54pm:
Quote:
One more question, where can I change the schedule color?


You can find some examples here:
http://www.mindfusion.eu/onlinehelp/webplanner/index.htm?CC_Customizing_the_Appe...

http://www.mindfusion.eu/onlinehelp/webplanner/index.htm?Tutorial_5__Styling.htm

I hope that helps,
Stoyan

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to customize the new appointment?
Reply #8 - Feb 18th, 2014 at 8:05pm
Print Post  
You could set Calendar.LocalizationInfo.SubjectCaption to the string you need (even if you aren't exactly localizing the app). You can load whole string tables from XML files - see the Localization sample project.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: How to customize the new appointment?
Reply #9 - Feb 18th, 2014 at 9:41pm
Print Post  
I'll try, again, thank you very much!

Stoyo wrote on Feb 18th, 2014 at 8:05pm:
You could set Calendar.LocalizationInfo.SubjectCaption to the string you need (even if you aren't exactly localizing the app). You can load whole string tables from XML files - see the Localization sample project.

I hope that helps,
Stoyan

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to customize the new appointment?
Reply #10 - Feb 19th, 2014 at 11:30am
Print Post  
Xylon wrote on Feb 18th, 2014 at 3:37pm:
Btw if I would like to set the subject dropdownlist value from database(exp in your code the names and values of "text one, text two, two three" are from databse, so pass database value into 'function()'??)


Hi,

The drop-down expects an array, which contains objects with two fields - value and text. The value field is used as the actual appointment subject value when the form result is evaluated; and the text field is used for displaying the text in the drop-down.

To populate the items in the select from a database, you could use an ajax call from the client to query the database from the server. To achieve this modify the populateSubjectItems function from the snippet above to something like:
Code (Javascript)
Select All
var populateSubjectItems = function() {

    // Create an object that will contain the result from the AJAX call
    var obj = {};
    // Fetch the data with an call to the server's GetSubjects webmethod
    $mindfusion.ajax({
        type: "POST",
        async: false,
        data: null,
        url: "Default.aspx/GetSubjects",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            obj.value = msg.d;
        },
        error: function(msg) {
            obj.error = { status: msg.status, statusText: msg.statusText };
        }
    });

    if (obj.value) {
        // If the query was successful deserialize the result and return it.
        var items = Sys.Serialization.JavaScriptSerializer.deserialize(obj.value);
        return items;
    }
} 



The code on the server that will query the database (uses an MSSql client in this example):
Code
Select All
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

...

[WebMethod]
public static string GetSubjects()
{
    StringBuilder result = new StringBuilder("[");
    try
    {
        using (SqlConnection connection = new SqlConnection(myConnectionString))
        {
            // Fetch the data from the database
            SqlCommand command = new SqlCommand(
                    "SELECT DISTINCT [SubjectText] FROM [SubjectsTable]", connection);
            connection.Open();
            SqlDataReader reader = command.ExecuteReader(CommandBehavior.Default);
            while (reader.Read())
            {
                 // Format the value from the database for the drop-down, i.e.:
                 // { value: valueFromDB, text: valueFromDB }
                 result.AppendFormat("{value:\"{0}\",text:\"{0}\"},", reader[0].ToString());
            }
        }
    }
    catch { }

    if (result[result.Length - 1] == ',')
        result.Remove(result.Length - 1, 1);
    result.Append("]");

    // Return the resulting JSON string to the client.
    // It should look like:
    // [{value:"First Value",text:"First Value"},{value:"Second Value",text:"Second Value"}]
    return result.ToString();
} 



In order to use WebMethods you should enable partial page rendering. Set the EnablePartialRendering property of the ScriptManager in your aspx code:
Code (HTML)
Select All
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> 



Note that with the above snippets the database will be queried every time the popup form is displayed, so it's not very efficient. You may need to cache the result from the query or do something else that is suitable for your scenario.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: How to customize the new appointment?
Reply #11 - Feb 19th, 2014 at 2:44pm
Print Post  
Big thx!!!

Lyubo wrote on Feb 19th, 2014 at 11:30am:
Xylon wrote on Feb 18th, 2014 at 3:37pm:
Btw if I would like to set the subject dropdownlist value from database(exp in your code the names and values of "text one, text two, two three" are from databse, so pass database value into 'function()'??)


Hi,

The drop-down expects an array, which contains objects with two fields - value and text. The value field is used as the actual appointment subject value when the form result is evaluated; and the text field is used for displaying the text in the drop-down.

To populate the items in the select from a database, you could use an ajax call from the client to query the database from the server. To achieve this modify the populateSubjectItems function from the snippet above to something like:
Code (Javascript)
Select All
var populateSubjectItems = function() {

    // Create an object that will contain the result from the AJAX call
    var obj = {};
    // Fetch the data with an call to the server's GetSubjects webmethod
    $mindfusion.ajax({
        type: "POST",
        async: false,
        data: null,
        url: "Default.aspx/GetSubjects",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            obj.value = msg.d;
        },
        error: function(msg) {
            obj.error = { status: msg.status, statusText: msg.statusText };
        }
    });

    if (obj.value) {
        // If the query was successful deserialize the result and return it.
        var items = Sys.Serialization.JavaScriptSerializer.deserialize(obj.value);
        return items;
    }
} 



The code on the server that will query the database (uses an MSSql client in this example):
Code
Select All
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

...

[WebMethod]
public static string GetSubjects()
{
    StringBuilder result = new StringBuilder("[");
    try
    {
        using (SqlConnection connection = new SqlConnection(myConnectionString))
        {
            // Fetch the data from the database
            SqlCommand command = new SqlCommand(
                    "SELECT DISTINCT [SubjectText] FROM [SubjectsTable]", connection);
            connection.Open();
            SqlDataReader reader = command.ExecuteReader(CommandBehavior.Default);
            while (reader.Read())
            {
                 // Format the value from the database for the drop-down, i.e.:
                 // { value: valueFromDB, text: valueFromDB }
                 result.AppendFormat("{value:\"{0}\",text:\"{0}\"},", reader[0].ToString());
            }
        }
    }
    catch { }

    if (result[result.Length - 1] == ',')
        result.Remove(result.Length - 1, 1);
    result.Append("]");

    // Return the resulting JSON string to the client.
    // It should look like:
    // [{value:"First Value",text:"First Value"},{value:"Second Value",text:"Second Value"}]
    return result.ToString();
} 



In order to use WebMethods you should enable partial page rendering. Set the EnablePartialRendering property of the ScriptManager in your aspx code:
Code (HTML)
Select All
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> 



Note that with the above snippets the database will be queried every time the popup form is displayed, so it's not very efficient. You may need to cache the result from the query or do something else that is suitable for your scenario.

Regards,
Lyubo

  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: How to customize the new appointment?
Reply #12 - Feb 19th, 2014 at 10:40pm
Print Post  
Any idea about import excel file(.xls) then display it in the calendar?

I am new to Mindfusion so a lot of questions...

I tried to search this forum and the help documentation, but I didn't find any material about excel operations.

Exp, I have an xls sheet which already has data in columns. I have start date I have end data, now I know how to read excel file into dataset, then bind it with gridview. But in mindfusion resourceview, how can I transfer the data such as "start time" "end time" into the calendar and display them in calendar?

Appreciate

Lyubo wrote on Feb 19th, 2014 at 11:30am:
Xylon wrote on Feb 18th, 2014 at 3:37pm:
Btw if I would like to set the subject dropdownlist value from database(exp in your code the names and values of "text one, text two, two three" are from databse, so pass database value into 'function()'??)


Hi,

The drop-down expects an array, which contains objects with two fields - value and text. The value field is used as the actual appointment subject value when the form result is evaluated; and the text field is used for displaying the text in the drop-down.

To populate the items in the select from a database, you could use an ajax call from the client to query the database from the server. To achieve this modify the populateSubjectItems function from the snippet above to something like:
Code (Javascript)
Select All
var populateSubjectItems = function() {

    // Create an object that will contain the result from the AJAX call
    var obj = {};
    // Fetch the data with an call to the server's GetSubjects webmethod
    $mindfusion.ajax({
        type: "POST",
        async: false,
        data: null,
        url: "Default.aspx/GetSubjects",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            obj.value = msg.d;
        },
        error: function(msg) {
            obj.error = { status: msg.status, statusText: msg.statusText };
        }
    });

    if (obj.value) {
        // If the query was successful deserialize the result and return it.
        var items = Sys.Serialization.JavaScriptSerializer.deserialize(obj.value);
        return items;
    }
} 



The code on the server that will query the database (uses an MSSql client in this example):
Code
Select All
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

...

[WebMethod]
public static string GetSubjects()
{
    StringBuilder result = new StringBuilder("[");
    try
    {
        using (SqlConnection connection = new SqlConnection(myConnectionString))
        {
            // Fetch the data from the database
            SqlCommand command = new SqlCommand(
                    "SELECT DISTINCT [SubjectText] FROM [SubjectsTable]", connection);
            connection.Open();
            SqlDataReader reader = command.ExecuteReader(CommandBehavior.Default);
            while (reader.Read())
            {
                 // Format the value from the database for the drop-down, i.e.:
                 // { value: valueFromDB, text: valueFromDB }
                 result.AppendFormat("{value:\"{0}\",text:\"{0}\"},", reader[0].ToString());
            }
        }
    }
    catch { }

    if (result[result.Length - 1] == ',')
        result.Remove(result.Length - 1, 1);
    result.Append("]");

    // Return the resulting JSON string to the client.
    // It should look like:
    // [{value:"First Value",text:"First Value"},{value:"Second Value",text:"Second Value"}]
    return result.ToString();
} 



In order to use WebMethods you should enable partial page rendering. Set the EnablePartialRendering property of the ScriptManager in your aspx code:
Code (HTML)
Select All
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> 



Note that with the above snippets the database will be queried every time the popup form is displayed, so it's not very efficient. You may need to cache the result from the query or do something else that is suitable for your scenario.

Regards,
Lyubo

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to customize the new appointment?
Reply #13 - Feb 20th, 2014 at 9:15am
Print Post  
Hi,

Data binding is currently not supported so you'll need to do this manually. Have a look at the 'Business Objects' sample provided with the control. It shows how you can manually bind schedule appointments to some generic business objects, which are persisted in XML format.

You could apply a similar approach in your case - after you've populated a DataSet from the xls file, extract the StartDate/EndDate pairs and assign them to newly created appointment objects. After that, add the appointments to the calendar's Schedule.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: How to customize the new appointment?
Reply #14 - Feb 20th, 2014 at 2:33pm
Print Post  
Thank you, I'll try

Lyubo wrote on Feb 20th, 2014 at 9:15am:
Hi,

Data binding is currently not supported so you'll need to do this manually. Have a look at the 'Business Objects' sample provided with the control. It shows how you can manually bind schedule appointments to some generic business objects, which are persisted in XML format.

You could apply a similar approach in your case - after you've populated a DataSet from the xls file, extract the StartDate/EndDate pairs and assign them to newly created appointment objects. After that, add the appointments to the calendar's Schedule.

Regards,
Lyubo

  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint